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

4351

Me gustaría hacer algo como esto para marcar un checkboxuso de jQuery :

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

o

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

¿Existe tal cosa?

7
  • Una pregunta más específica (¡y muy útil!), "¿Cómo verifico un elemento en una casilla de verificación configurada POR VALOR?", Creo que también podemos discutir aquí, y publiqué una respuesta a continuación. 9/03/12 a las 12:36
  • Verifique otras formas de hacer esto usando jQuery aquí stackoverflow.com/a/22019103/1868660 25 feb 2014 a las 15:46
  • Si necesita que se active el evento onchange, es $("#mycheckbox").click(); 11 de mayo de 2015 a las 14:06
  • "Marcar algo" sugiere probarlo, así que creo que "Marcar una casilla de verificación" es un título más claro y mejor.
    Alireza
    12 de mayo de 2015 a las 17:26
  • apuntalar(); la función es la respuesta perfecta. Consulte la definición de la función: api.jquery.com/prop 23 de mayo de 2016 a las 15:01
6214

JQuery moderno

Utilizar .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 operarán en todos los elementos coincidentes.

jQuery 1.5.xy inferior

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 antes de la versión 1.6 y es preferible usarlo, $('.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, un sutil pero probablemente cambio de comportamiento no deseado.

Para obtener 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.xa 1.6 en las notas de la versión 1.6 y en la sección Atributos vs. Propiedades de la .prop()documentación .

8
  • 28
    @Xian eliminar el atributo marcado hace que sea imposible restablecer el formulario 23/03/11 a las 15:27
  • 6
    Como nota al margen, jQuery 1.6.1 debería solucionar el problema que mencioné, por lo que técnicamente todos podemos volver a usar $ (...). Prop (...) 13 de mayo de 2011 a las 20:08
  • 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 ... 30/03/12 a las 9:32
  • 49
    Como dice Tyler, es una mejora insignificante en el rendimiento. Para mí, codificar usando una API común lo hace más legible que mezclar API nativas y API de jQuery. Me quedaría con jQuery. 4 de mayo de 12 a las 16:28
  • 18
    @TylerCrompton: por supuesto, no se trata solo de rendimiento, pero hacerlo $(element).prop('checked')es una completa pérdida de escritura. element.checkedexiste y debe utilizarse en los casos en que ya tengaelement
    gnarf
    1/10/12 a las 23:35
747

Usar:

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

Y si desea verificar si una casilla de verificación está marcada o no:

$('.myCheckbox').is(':checked');
6
  • 4
    también $ (selector) .checked to check está marcado 2 de mayo de 2011 a las 23:56
  • 6
    Probé este código exacto y no funcionó para mí en el caso de una casilla de verificación Seleccionar todo / No seleccionar nada que debe marcar y desmarcar todo, así como verificar su estado. En cambio, probé la respuesta de @Christopher Harris y eso funcionó. 28 de marzo de 2013 a las 1:26
  • ¿Por qué usar "form #mycheckbox" en lugar de simplemente "#mycheckbox"? La identificación ya es única en todo el documento, es más rápido y sencillo elegirla directamente. 11/10/2013 a las 15:27
  • @YuriAlbuquerque fue un ejemplo. puede utilizar el selector que desee.
    bchhun
    13/10/2013 a las 0:14
  • 5
    $ (selector) .checked no funciona. No hay un método 'verificado' en jQuery. 7/10/15 a las 16:42
330

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. Estos deberían ser todos los navegadores principales, pero no puedo realizar pruebas anteriores a Internet Explorer 9.

El problema (jQuery 1.6):

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

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

Violín

La solución:

Al utilizar la propiedad "comprobada" de JavaScript en los elementos DOM , podemos resolver el problema directamente, en lugar de intentar 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. Por lo tanto, si bien esto puede parecer una solución abrumadora, 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 utilizar un complemento, puede utilizar 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;
});
6
  • 5
    En su primer ejemplo de JSFiddle debería usar en removeAttr('checked')lugar deattr('checked', false) 30 de enero de 2012 a las 7:00
  • 4
    @DanielXMoore, estás eludiendo el problema. El ejemplo fue para 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. 30/01/12 a las 13:28
  • 3
    @ChristopherHarris Ok, tienes razón, me perdí eso. Sin embargo, a partir de jQuery 1.6, ¿no debería 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 sigue siendo solo el primero) 2 de febrero de 2012 a las 1:45
  • Si. propes definitivamente la forma adecuada de establecer atributos en un elemento. 2 de febrero de 2012 a las 2:40
  • @ChristopherHarris, agregué lo que necesitaba al complemento para permitir cierta flexibilidad de parámetros. Esto facilitó el procesamiento en línea sin la conversión de tipos. Esp de bases de datos dispares con 'ideas' sobre lo que es "verdadero". Violín: jsfiddle.net/Cyberjetx/vcp96 4 de marzo de 2014 a las 3:59
153

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 como esta:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
5
  • también puede ir $ ("# myTable input: checkbox"). each (...); 8 de ene. De 2009 a las 22:37
  • También puedes ir $(".myCheckbox").click() 20/09/10 a las 11:49
  • 3
    @Michah eliminar el atributo marcado hace que sea imposible restablecer el formulario 23/03/11 a las 15:32
  • 12
    Esta respuesta está desactualizada porque usa en .attrlugar de .prop. 21/01/2014 a las 14:15
  • $("#mycheckbox").click();trabajado para mí, ya que estaba escuchando evento de cambio y también .attry .propno lo hizo evento de cambio de fuego. 1 de mayo de 2017 a las 6:30 p.m.
82

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 querer darles nombres más únicos como mycheck () y myuncheck () en caso de que use alguna otra biblioteca que use esos nombres.

2
  • 5
    @ livfree75 eliminar el atributo marcado hace que sea imposible restablecer el formulario 23/03/11 a las 15:32
  • 5
    Esta respuesta está desactualizada porque usa en .attrlugar de .prop. 21/01/2014 a las 14:16
66
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

3
  • 4
    el superior fallará ... marcado no es un miembro de objeto jquery 9 de ene. De 2009 a las 0:20
  • 5
    Esta respuesta está desactualizada porque usa en .attrlugar de .prop. 21/01/2014 a las 14:16
  • En mi opinión, el clickevento no es confiable en Firefox y Edge. 31/08/19 a las 11:21
63

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 el atributo por completo 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 DEMOSTRACIÓN DE FUNCIONAMIENTO 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');
    }
});
12
  • 1
    Esto es inexacto. establecer el atributo 'comprobado' en '' no desmarcará las casillas de verificación en al menos Chrome. 6 de mayo de 2011 a las 5:58
  • @xixonia Probé antes de publicar tu violín no funciona porque no cambiaste el menú de la izquierda para incluir jquery 6 de mayo de 2011 a las 18:44
  • 1
    mcgralim - en 1.6 es aún más fácil ... $(".mycheckbox").prop("checked", true/false)
    gnarf
    6 de mayo de 2011 y 20:11
  • 2
    @MarkAmery mencionaste que mi publicación no agregó nada en el momento de la publicación, pero eso es correcto. Si observa el historial de la respuesta aceptada, encontrará que sugieren eliminar el elemento. Lo que hace que sea imposible restablecer el formulario, por eso publiqué para empezar. 15/12/2014 a las 14:50
  • 1
    @mcgrailm Seguí adelante y modifiqué 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. 15/12/2014 a las 16:54
53

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.

0
48

Asumiendo que la pregunta es ...

¿Cómo puedo marcar una casilla de verificación configurada 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 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);
46

Me estoy perdiendo la solución. Siempre usaré:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
1
  • 3
    Esto no responde a la pregunta (la pregunta se trata de establecer si una casilla de verificación está marcada, no de 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 que .val()siempre regresará undefinedcuando se llame a elementos 0 para detectar que un objeto jQuery está vacío, cuando podría simplemente marque su .lengthen su lugar) - consulte stackoverflow.com/questions/901712/… para obtener enfoques más legibles. 14 de diciembre de 2014 a las 23:47
43

Para marcar una casilla de verificación usando 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);
0
38

Aquí hay una forma 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>
0
32

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 usando el método prop de Jquery 1.6+ más nuevo, 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;
    });
});
1
  • 4
    Esta respuesta está desactualizada porque usa en .attrlugar de .prop. 21/01/2014 a las 14:18
31

Prueba esto:

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

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

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 prop que reemplaza attr, por ejemplo:

$(objectElement).prop('checked');
1
  • 2
    Esta respuesta está desactualizada porque usa en .attrlugar de .prop. 21/01/2014 a las 14:18
26

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 intervalo, la interfaz no se actualizará sin importar lo que hagas.

26

Aquí está el código y la demostración sobre 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
  • - 1; mezclar selectores de 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 usando .prop(). Independientemente, esta es otra respuesta tardía que no agrega nada nuevo. 15/12/2014 a las 18:33
22

Otra posible solución:

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

Como dijo @ livefree75:

jQuery 1.5.xy inferior

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

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

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

Para jQuery 1.6+

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

Para jQuery 1.5.xy inferior

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

Verificar,

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

Para marcar y desmarcar

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
1
  • 3
    - 1; esto no agrega ningún valor en absoluto a un hilo ya hinchado. El código aquí es exactamente el mismo que la respuesta aceptada. 15/12/2014 a las 18:25
18

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

In Internet Explorer prior to version 9, using .prop() to set a DOM element property to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks if the property is not removed (using .removeProp()) before the DOM element is removed from the document. To safely set values on DOM objects without memory leaks, use .data().

3
  • 2
    Esto es irrelevante, ya que todas las respuestas (correctas) usan .prop('checked',true). 21/01/2014 a las 14:19
  • No estoy seguro de haber entendido tu comentario. Esto todavía existe en la documentación de jQuery. ¿Está insinuando que no hay pérdida de memoria en IE <9?
    naor
    21/01/2014 a las 20:53
  • 2
    No hay pérdida de memoria en este caso, ya que lo estamos estableciendo en un valor primitivo simple (booleano). 21/01/2014 a las 20:56
17
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
1
  • 4
    - 1 por ser una respuesta de solo código, no responder la pregunta directamente y no agregar nada que otras respuestas no hayan cubierto. 15/12/2014 a las 18:28
16

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

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

o

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

Incluso más corto sería:

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

Aquí también hay un jsFiddle .

0
15

JavaScript simple es muy simple y mucho menos general:

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

Ejemplo aquí

1
  • @MarkAmery La respuesta aceptada no cubre cómo hacerlo sin jQuery. Mi respuesta agrega un beneficio adicional a la respuesta aceptada.
    Alex W
    15/12/2014 a las 20:12
14

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
4
  • dieciséis
    ¿no debería ser truey falseno 'true'e 'false'?
    tpower
    5 de ene. De 2012 a las 15:34
  • 9
    "No funcionó" porque 'false'se convirtió a un valor booleano que dio como resultado true: una cadena vacía se evalúa como, falsepor lo tanto, "funcionó". Vea este violín por ejemplo de lo que quiero decir. 24/06/12 a las 11:41
  • @ chris97ong He revertido tu edición; cuando alguien dice "No use el código de abajo porque no funciona", arreglar ese código mientras deja el comentario diciendo que no funciona es dañino, especialmente cuando rompe la explicación en los comentarios de por qué el código no es no funciona. Dicho esto, esta respuesta todavía es algo confusa y merece un voto negativo por las razones dadas por tpower y ShadowWizard. 15/12/2014 a las 18:46
  • 1
    use valores verdaderos y falsos para booleanos, no use 'verdadero' o 'falso' (cadenas). 21/02/15 a las 22:34
14

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

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

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

12

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

En caso de que use ASP.NET MVC , genere muchas casillas de verificación y luego tenga que seleccionar / deseleccionar todo usando JavaScript, puede hacer lo siguiente.

HTML

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }
1
  • ¿Por qué se necesita cada uno aquí?
    tpower
    9 de julio de 2014 a las 14:58