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


4132

Me gustaría hacer algo como esto para marcar checkboxusando jQuery :

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

o

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

¿Existe tal cosa?


Una pregunta más específica (¡y muy útil!), "¿Cómo verifico un elemento en una casilla de verificación POR VALOR?", Creo que también podemos discutir aquí, y publiqué una respuesta a continuación.
Peter Krauss

Verifique otras formas de hacer esto usando jQuery aquí stackoverflow.com/a/22019103/1868660
Subodh Ghulaxe

Si necesita que se active el evento onchange, es$("#mycheckbox").click();
HumanInDisguise

"Comprobar algo" sugiere probarlo, así que creo que 'Hacer que una casilla esté marcada' es un título más claro y mejor.
Alireza

apuntalar(); La función es la respuesta perfecta. Consulte la definición de la función - api.jquery.com/prop
yogihosting

Respuestas:


5969

JQuery moderno

Uso .prop():

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

API DOM

Si está trabajando con un solo elemento, siempre puede acceder al subyacente HTMLInputElementy modificar su .checkedpropiedad:

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

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

jQuery 1.5.xy debajo

El .prop()método no está disponible, por lo que debe usarlo .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 utilizarlo, $('.myCheckbox').removeAttr('checked');ya que este último, si la casilla se marcó inicialmente, cambiará el comportamiento de una llamada .reset()en cualquier formulario que lo contenga, algo sutil pero probablemente cambio de comportamiento no deseado.

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


26
@Xian eliminando el atributo marcado hace que sea imposible restablecer el formulario
mcgrailm

66
Como nota al margen, jQuery 1.6.1 debería solucionar el problema que mencioné, para que técnicamente todos podamos volver a usar $ (...). Prop (...)
cwharris

19
"Si está trabajando con un solo elemento, siempre será más rápido de usar DOMElement.checked = true". Pero sería insignificante, porque es solo un elemento ...
Tyler Crompton

46
Como dice Tyler, es una mejora insignificante en el rendimiento. Para mí, la codificación utilizando una API común lo hace más legible que mezclar API nativas y API jQuery. Me quedaría con jQuery.
Charlie Kilian

18
@TylerCrompton: por supuesto, no se trata solo de rendimiento, pero hacerlo $(element).prop('checked')es una pérdida total de escritura. element.checkedexiste y se debe utilizar en los casos en los que ya tieneelement
gnarf

705

Utilizar:

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

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

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

44
también $ (selector). comprobado para verificar está marcado
eomeroff

66
Probé este código exacto y no funcionó para mí en el caso de una casilla de verificación seleccionar todo / no seleccionar ninguno que necesita marcar y desmarcar todo, así como verificar su estado. En cambio, probé la respuesta de @Christopher Harris y eso funcionó.
JD Smith

¿Por qué usar "formulario #mycheckbox" en lugar de simplemente "#mycheckbox"? El ID ya es único en todo el documento, es más rápido y sencillo seleccionarlo directamente.
YuriAlbuquerque

@YuriAlbuquerque fue un ejemplo. puedes usar el selector que quieras.
bchhun

55
$ (selector) .checked no funciona. No hay un método 'verificado' en jQuery.
Brendan Byrd

318

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

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

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

Violín

La solución:

Al usar la propiedad "marcada" de JavaScript en los elementos DOM , podemos resolver el problema directamente, en lugar de tratar de manipular el DOM para que 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;
});

55
En su primer ejemplo de JSFiddle, debería usar en removeAttr('checked')lugar deattr('checked', false)
Daniel X Moore

44
@DanielXMoore, estás esquivando el tema. El ejemplo fue mostrar que una vez que el usuario hizo clic en la casilla de verificación, el navegador ya no responde a los checkedcambios de atributos, independientemente del método utilizado para cambiarlos.
cwharris

3
@ChristopherHarris Ok, tienes razón, me perdí eso. A partir de jQuery 1.6, ¿no deberías usar el método .prop? $('.myCheckBox').prop('checked', true)De esa manera, se aplicará automáticamente a todo el conjunto de elementos coincidentes (solo cuando se configura, sin embargo, obtener solo es el primero)
Daniel X Moore

Si. propDefinitivamente es la forma apropiada de establecer atributos en un elemento.
cwharris

@ChristopherHarris, he agregado lo que necesitaba al complemento para permitir cierta flexibilidad de parámetros. Esto facilitó el procesamiento en línea sin la conversión de tipo. Esp de bases de datos dispares con 'ideas' sobre lo que es "verdadero". Violín: jsfiddle.net/Cyberjetx/vcp96
Joe Johnston

147

Tu puedes 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()
});

también puede ir $ ("# entrada myTable: casilla de verificación"). each (...);
Chris Brandsma

También puedes ir$(".myCheckbox").click()
RobertPitt

3
@Michah eliminando el atributo marcado hace que sea imposible restablecer el formulario
mcgrailm 23/03/11

12
Esta respuesta está desactualizada porque usa en .attrlugar de .prop.
Blazemonger

$("#mycheckbox").click();trabajado para mí, ya que estaba escuchando evento de cambio y también .attry .propno lo hizo evento de cambio de fuego.
Damodar Bashyal

80

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.


55
@ livfree75 eliminar el atributo marcado hace que sea imposible restablecer el formulario
mcgrailm

55
Esta respuesta está desactualizada porque usa en .attrlugar de .prop.
Blazemonger

64
$("#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.


44
el primero fallará ... marcado no es un miembro de objeto jquery
redsquare

55
Esta respuesta está desactualizada porque usa en .attrlugar de .prop.
Blazemonger

En mi opinión, el clickevento no es confiable en Firefox y Edge.
Vahid Amiri

62

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.

MALA 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');
    }
});

1
Esto es inexacto. establecer el atributo 'marcado' en '' no desmarcará las casillas de verificación en al menos Chrome
cwharris

@xixonia Probé antes de publicar tu violín no funciona porque no
cambiaste

1
mcgralim - 1.6 en su aún más fácil .... $(".mycheckbox").prop("checked", true/false)
gnarf

2
@ MarkAmery mencionaste que mi publicación no agregó nada en el momento de la publicación, pero eso es exacto. Si observa el historial de la respuesta aceptada, encontrará que sugieren que elimine el elemento. Lo que hace que sea imposible restablecer el formulario, por eso publiqué para empezar.
mcgrailm

1
@mcgrailm He seguido adelante y modificado la respuesta aceptada a la luz de sus comentarios. Si desea echarle un vistazo y comprobar que se ve bien en su estado actual, se lo agradecería. Mis disculpas nuevamente por ofrecer una crítica aguda que fue, al menos en parte, muy equivocada.
Mark Amery

51

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.


46

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, difieren según el atributovalue : 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

Me falta la solución. Siempre usaré:

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

3
Esto no responde la pregunta (la pregunta es acerca de establecer si una casilla de verificación está marcada, no determinar si una casilla de verificación está marcada). También es una forma bastante fea de determinar si la casilla de verificación está marcada (por un lado, está explotando el hecho no evidente de sí mismo que .val()siempre volverá undefinedcuando se invoquen elementos 0 para detectar que un objeto jQuery está vacío, cuando podría simplemente verifique su .lengthlugar): consulte stackoverflow.com/questions/901712/… para obtener enfoques más legibles.
Mark Amery

42

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);

37

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>


31

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;
    });
});

44
Esta respuesta está desactualizada porque usa en .attrlugar de .prop.
Blazemonger

30

Prueba esto:

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

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

29

Podemos usar elementObjectcon 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 apoyo que reemplaza attr, por ejemplo:

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

2
Esta respuesta está desactualizada porque usa en .attrlugar de .prop.
Blazemonger

25

Si está utilizando PhoneGap para el 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

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;
        }
    }
});

- 1; mezclar selectores jQuery como $("#check")con llamadas de API DOM sin procesar document.getElementsByTagName("input")me parece poco elegante, especialmente dado que los forbucles aquí podrían evitarse mediante el uso .prop(). Independientemente, esta es otra respuesta tardía que no agrega nada nuevo.
Mark Amery

20

Otra posible solución:

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

19

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();

18

Si usa dispositivos móviles 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

Tenga en cuenta las pérdidas de memoria en Internet Explorer antes de Internet Explorer 9 , como dice la 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 ().


2
Esto es irrelevante, ya que todas las respuestas (correctas) usan .prop('checked',true).
Blazemonger

No estoy seguro de haber entendido su comentario. Esto todavía existe en la documentación de jQuery. ¿Estás insinuando que no hay pérdida de memoria en IE <9?
naor

2
No hay pérdida de memoria en este caso, ya que lo estamos configurando en un valor primitivo simple (booleano).
Blazemonger

18

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');

17

Para marcar y desmarcar

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

3
- 1; esto no agrega ningún valor a un hilo ya hinchado. El código aquí es exactamente el mismo que la respuesta aceptada.
Mark Amery

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

44
- 1 por ser una respuesta de solo código, no responder la pregunta directamente y no agregar nada que otras respuestas no hayan cubierto.
Mark Amery

15

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í hay un jsFiddle también.


14

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í


@MarkAmery La respuesta aceptada no cubre cómo hacerlo sin jQuery. Mi respuesta agrega un beneficio adicional a la respuesta aceptada.
Alex W

13

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

16
¿No debería ser truey falsey no 'true'y 'false'?
tpower

99
"No funcionó" porque 'false'se convirtió en un valor booleano que resultó en una truecadena vacía que se evalúa falseasí que "funcionó". Ver este violín, por ejemplo, de lo que quiero decir.
Shadow Wizard es Ear For You el

@ chris97ong He revertido tu edición; cuando alguien dice "No utilices el siguiente código porque no funciona", arreglar ese código y dejar el comentario diciendo que no funciona es perjudicial, especialmente cuando se rompe la explicación en los comentarios de por qué el código no funciona No funciona Dicho esto, esta respuesta todavía es algo confusa y merece un voto negativo por las razones dadas por tpower y ShadowWizard.
Mark Amery

1
use valores verdaderos y falsos para booleano, no use 'verdadero' o 'falso' (cadenas).
Jone Polvora

13

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ó la casilla de verificación del atributo marcado.


11

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
    });

10

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");
}

77
Esto no responde la pregunta.
Samuel Liew

2
Esta respuesta está desactualizada porque usa en .attrlugar de .prop.
Blazemonger
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.