Configuración de "marcado" para una casilla de verificación con jQuery?

Question

Me gustaría hacer algo como esto para marcar una casilla de verificación usando jQuery :

$(".myCheckBox").checked(true);

o

$(".myCheckBox").selected(true);

¿Existe tal cosa?

Answer 1

jQuery 1.6+

Utilice el nuevo .prop () método:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.xy debajo

El método .prop () no está disponible, por lo que debe usar .attr () .

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Tenga en cuenta que este es el enfoque utilizado por Las pruebas unitarias de jQuery anteriores a la versión 1.6 y es preferible a usar

$('.myCheckbox').removeAttr('checked');

dado que este último, si la casilla se marcó inicialmente, cambiará el comportamiento de una llamada a .reset () en cualquier formulario que lo contenga: un cambio de comportamiento sutil pero probablemente inoportuno.

Para obtener más contexto, se puede encontrar una discusión incompleta de los cambios en el manejo del atributo / propiedad marcado en la transición de 1.5.x a 1.6 en notas de la versión 1.6 y la sección Atributos vs. Propiedades de la .prop () documentación .

Cualquier versión de jQuery

Si está trabajando con un solo elemento, siempre puede modificar el Propiedad HTMLInputElement .checked :

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

El beneficio de usar los métodos .prop () y .attr () en lugar de esto es que funcionarán en todos los elementos coincidentes.

Answer 2

Uso:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

Y si desea verificar si una casilla está marcada o no:

$('.myCheckbox').is(':checked');

Answer 3

Esta es la forma correcta de marcar y desmarcar casillas de verificación con jQuery, ya que es estándar multiplataforma y permitirá permitir reposiciones de formularios.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Al hacer esto, está utilizando los estándares de JavaScript para marcar y desmarcar las casillas de verificación, por lo que cualquier navegador que implemente correctamente el " marcado " La propiedad del elemento de casilla de verificación ejecutará este código sin problemas. Este debería ser todos los principales navegadores, pero no puedo probar antes de Internet & nbsp; Explorer & nbsp; 9.

El problema (jQuery 1.6):

Una vez que un usuario hace clic en una casilla de verificación, esa casilla deja de responder al " marcado " cambios de atributos.

Aquí hay un ejemplo del atributo de la casilla de verificación que no puede hacer el trabajo después de que alguien ha hecho clic en la casilla de verificación (esto sucede en Chrome).

Fiddle

La solución:

Mediante el uso de JavaScript "marcado" propiedad en los elementos DOM , podemos resolver el problema directamente, en lugar de tratar de manipular el DOM para que haga lo que quiere que lo haga.

Fiddle

Este complemento alterará la propiedad marcada de cualquier elemento seleccionado por jQuery, y marcará y desmarcará con éxito las casillas de verificación en todas las circunstancias. Entonces, si bien esto puede parecer una solución agotadora, mejorará la experiencia del usuario de su sitio y ayudará a evitar la frustración del usuario.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

Alternativamente, si no desea usar un complemento, puede usar los siguientes fragmentos de código:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

Answer 4

Puedes hacerlo

$('.myCheckbox').attr('checked',true) //Standards compliant

o

$("form #mycheckbox").attr('checked', true)

Si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use este en su lugar:

$("#mycheckbox").click();

Puede desmarcar quitando el atributo por completo:

$('.myCheckbox').removeAttr('checked')

Puede marcar todas las casillas de verificación de esta manera:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

Answer 5

También puede extender el objeto $ .fn con nuevos métodos:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Entonces puedes hacer:

$(":checkbox").check();
$(":checkbox").uncheck();

O es posible que desee darles nombres más únicos como mycheck () y myuncheck () en caso de que use alguna otra biblioteca que use esos nombres.

Answer 6

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

El último activará el evento de clic para la casilla de verificación, los otros no. Entonces, si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use el último.

Answer 7

Para marcar una casilla de verificación, debe usar

 $('.myCheckbox').attr('checked',true);

o

 $('.myCheckbox').attr('checked','checked');

y para desmarcar una casilla de verificación, siempre debe establecerla en falso:

 $('.myCheckbox').attr('checked',false);

Si lo haces

  $('.myCheckbox').removeAttr('checked')

elimina todo el atributo y, por lo tanto, no podrá restablecer el formulario.

BAD DEMO jQuery 1.6 . Creo que esto está roto. Para 1.6 voy a hacer una nueva publicación sobre eso.

NUEVA DEMO DE TRABAJO jQuery 1.5.2 funciona en Chrome.

Ambas demostraciones usan

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

Answer 8

Esto selecciona elementos que tienen el atributo especificado con un valor que contiene la subcadena dada " ckbItem " ;:

$('input[name *= ckbItem]').prop('checked', true);

Seleccionará todos los elementos que contengan ckbItem en su atributo de nombre.

Answer 9

Suponiendo que la pregunta es ...

¿Cómo verifico un conjunto de casillas de verificación POR VALOR?

Recuerde que en un conjunto de casillas de verificación típico, todas las etiquetas de entrada tienen el mismo nombre, se diferencian por el atributo value : no hay ID para cada entrada del conjunto .

La respuesta de Xian se puede ampliar con un selector más específico , utilizando la siguiente línea de código:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

Answer 10

Me falta la solución. Siempre usaré:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

Answer 11

Para marcar una casilla de verificación con jQuery 1.6 o superior, simplemente haga esto:

checkbox.prop('checked', true);

Para desmarcar, use:

checkbox.prop('checked', false);

Esto es lo que me gusta usar para alternar una casilla de verificación usando jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

---

Si está utilizando jQuery 1.5 o inferior:

checkbox.attr('checked', true);

Para desmarcar, use:

checkbox.attr('checked', false);

Answer 12

Aquí hay una manera de hacerlo sin jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);

<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>

Answer 13

Prueba esto:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

Answer 14

Aquí hay un código para marcar y desmarcar con un botón:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Actualización: Aquí está el mismo bloque de código que usa el nuevo método Jquery 1.6+ prop, que reemplaza attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

Answer 15

Podemos usar elementObject con jQuery para verificar el atributo:

$(objectElement).attr('checked');

Podemos usar esto para todas las versiones de jQuery sin ningún error.

Actualización: Jquery 1.6+ tiene el nuevo método de utilería que reemplaza attr, por ejemplo:

$(objectElement).prop('checked');

Answer 16

Si está utilizando PhoneGap haciendo desarrollo de aplicaciones, y tiene un valor en el botón que desea mostrar al instante , recuerda hacer esto

$('span.ui-[controlname]',$('[id]')).text("the value");

Descubrí que sin el lapso, la interfaz no se actualizará sin importar lo que hagas.

Answer 17

Aquí está el código y la demostración de cómo marcar varias casillas de verificación ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

Answer 18

Otra posible solución:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

Answer 19

Si usa un dispositivo móvil y desea que la interfaz se actualice y muestre la casilla de verificación como desmarcada, use lo siguiente:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

Answer 20

Tenga en cuenta las pérdidas de memoria en Internet & nbsp; Explorer antes de Internet & nbsp; Explorer & nbsp; 9 , como los estados de documentación de jQuery :

  

En Internet Explorer anterior a la versión 9, usando .prop () para establecer un DOM   propiedad del elemento para cualquier cosa que no sea un valor primitivo simple   (número, cadena o booleano) puede provocar pérdidas de memoria si la propiedad es   no eliminado (usando .removeProp ()) antes de eliminar el elemento DOM   del documento Para establecer valores de forma segura en objetos DOM sin memoria   fugas, use .data ().

Answer 21

Para jQuery 1.6+

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Para jQuery 1.5.xy menos

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Para verificar,

$('.myCheckbox').removeAttr('checked');

Answer 22

Para marcar y desmarcar

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Answer 23

Como dijo @ livefree75:

jQuery 1.5.xy debajo

También puede extender el objeto $ .fn con nuevos métodos:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Pero en las nuevas versiones de jQuery, tenemos que usar algo como esto:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

Entonces puedes hacer:

    $(":checkbox").check();
    $(":checkbox").uncheck();

Answer 24

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

Answer 25

Esta es probablemente la solución más corta y fácil:

$(".myCheckBox")[0].checked = true;

o

$(".myCheckBox")[0].checked = false;

---

Aún más corto sería:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

---

Aquí está a jsFiddle también.

Answer 26

JavaScript simple es muy simple y mucho menos sobrecarga:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Ejemplo aquí

Answer 27

No pude hacerlo funcionar usando:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Tanto verdadero como falso marcarían la casilla de verificación. Lo que funcionó para mí fue:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

Answer 28

Cuando marcó una casilla de verificación como;

$('.className').attr('checked', 'checked')

puede que no sea suficiente. También debe llamar a la función a continuación;

$('.className').prop('checked', 'true')

Especialmente cuando eliminó el atributo marcado casilla de verificación.

Answer 29

Aquí está la respuesta completa usando jQuery

Lo pruebo y funciona al 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

Answer 30

En jQuery,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

o

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

En JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}