Me gustaría hacer algo como esto para marcar un checkbox usando jQuery :

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

O

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

¿Existe tal cosa?

4261
tpower 9 ene. 2009 a las 01:20

25 respuestas

La mejor respuesta

JQuery moderno

Utilice .prop():

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

API DOM

Si está trabajando con un solo elemento, siempre puede acceder al {{ X0}} y modifique su .checked propiedad:

$('.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.

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 anterior a la versión 1.6 y es preferible utilizar $('.myCheckbox').removeAttr('checked'); ya 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 más contexto, se puede encontrar una discusión incompleta de los cambios en el manejo del atributo / propiedad checked 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 documentación .prop().

5922
MultiplyByZer0 18 ago. 2019 a las 19:04

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 corta sería:

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

Aquí también está a jsFiddle .

15
Peter Mortensen 13 dic. 2014 a las 16:46

Me falta la solución. Siempre usaré:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
45
Peter Mortensen 13 dic. 2014 a las 16:43
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh 16 jul. 2013 a las 02:57

Otra posible solución:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
20
Getz 21 jul. 2014 a las 09:34

Prueba esto:

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

$('#checkboxid').get(0).checked = false; //For unchecking
30
Peter Mortensen 16 feb. 2013 a las 10:33

Usted puede hacer

$('.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 eliminando el atributo por completo:

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

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

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
146
Peter Mortensen 29 dic. 2011 a las 18:18

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.

51
Abou-Emish 18 jul. 2018 a las 13:44

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;
    });
});
31
MrBoJangles 11 abr. 2017 a las 15:55

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

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

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

25
Peter Mortensen 16 feb. 2013 a las 10:32

Para marcar y desmarcar

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
Theraot 3 dic. 2013 a las 02:18

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");
}
10
Peter Mortensen 3 abr. 2014 a las 21:31

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
    });
11
user1477929user1477929 27 feb. 2013 a las 15:49

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
13
Mark Amery 15 dic. 2014 a las 18:44

Como @ livefree75 dijo:

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 simplemente hacer:

    $(":checkbox").check();
    $(":checkbox").uncheck();
19
Peter Mortensen 21 may. 2017 a las 11:00

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

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

18
Peter Mortensen 22 nov. 2014 a las 15:33

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;
        }
    }
});
25
Joaquinglezsantos 10 feb. 2016 a las 13:18

Esta es la forma correcta de marcar y desmarcar las 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 estándares de JavaScript para marcar y desmarcar casillas de verificación, por lo que cualquier navegador que implemente correctamente la propiedad "marcada" 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 Explorer 9.

El problema (jQuery 1.6):

Una vez que un usuario hace clic en una casilla de verificación, esa casilla deja de responder a los cambios de atributo "marcados".

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:

Al usar la propiedad "marcada" de JavaScript en los elementos DOM, podemos resolver el problema directamente, en lugar de tratar de manipularlo que el DOM haga lo que queremos que haga.

Violín

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 agobiante, 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;
});
314
RevanthKrishnaKumar V. 31 jul. 2015 a las 13:43

Para jQuery 1.6+

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

Para jQuery 1.5.xy debajo

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

Verificar,

$('.myCheckbox').removeAttr('checked');
18
logan 21 abr. 2015 a las 10:29

Asumiendo 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);
45
5 revs, 3 users 74% 9 jun. 2014 a las 15:07

Uso:

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

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

$('.myCheckbox').is(':checked');
700
Peter Mortensen 18 mar. 2015 a las 18:34

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');
    }
});
62
Peter Mortensen 29 dic. 2011 a las 18:21

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");
18
Matt Peacock 11 ene. 2013 a las 13:05
$("#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.

64
Chris Brandsma 3 feb. 2009 a las 17:06

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 simplemente hacer:

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

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

80
livefree75 20 ago. 2010 a las 18:19