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

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

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

or

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

¿Existe tal cosa?

preguntado el 08 de enero de 09 a las 23:01

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. -

Consulte otras formas de hacer esto usando jQuery aquí stackoverflow.com/a/22019103/1868660 -

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

"Comprobar algo" sugiere probarlo, así que creo que "Marcar una casilla de verificación" es un título más claro y mejor. -

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

30 Respuestas

JQuery moderno

Utilizan .prop():

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

API DOM

Si está trabajando con un solo elemento, siempre puede acceder al subyacente HTMLInputElement y modificar su .checked propiedad:

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

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

jQuery 1.5.xy inferior

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

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

Tenga en cuenta que esto es el enfoque utilizado por las pruebas unitarias de jQuery antes de la versión 1.6 y es preferible usar $('.myCheckbox').removeAttr('checked'); ya que este último, si la casilla se marcó inicialmente, cambiará el comportamiento de una llamada a .reset() en cualquier forma que lo contenga, un cambio de comportamiento sutil pero probablemente no deseado.

Para más contexto, una discusión incompleta de los cambios en el manejo de la checked atributo / propiedad en la transición de 1.5.xa 1.6 se puede encontrar en el notas de la versión 1.6 y Atributos frente a propiedades sección de la .prop() documentación.

Respondido 18 ago 19, 22:08

@Xian eliminar el atributo marcado hace que sea imposible restablecer el formulario - mcgrailm

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 (...) - cwharris

"Si trabaja 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

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. - Katie Kilian

@TylerCrompton - Por supuesto, no se trata solo de rendimiento, sino de hacer $(element).prop('checked') es un completo desperdicio de mecanografía. element.checked existe y debe utilizarse en los casos en que ya tenga element - gnarf

Uso:

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

respondido 18 mar '15, 21:03

también $ (selector) .checked to check está marcado - eomeroff

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ó. - JD Smith

¿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. - YuriAlbuquerque

@YuriAlbuquerque fue un ejemplo. puede utilizar el selector que desee. - bchhun

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

Esta es la forma correcta de marcar y desmarcar casillas de verificación con jQuery, ya que es un estándar multiplataforma, y 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. Esto debemos ser todos los principales navegadores, 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".

A continuación, se muestra un ejemplo del atributo de casilla de verificación que no realiza el trabajo después de que alguien clickeado la casilla de verificación (esto sucede en Chrome).

Violín

La solución:

Mediante el uso de la propiedad "comprobada" de JavaScript en el DOM elementos, podemos resolver el problema directamente, en lugar de intentar manipular el DOM para que haga lo que quieres que hacer.

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

Respondido 31 Jul 15, 16:07

En su primer ejemplo de JSFiddle debería usar removeAttr('checked') más bien que attr('checked', false) - Daniel X Moore

@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 checked cambios de atributos, sin tener en cuenta del método utilizado para cambiarlos. - cwharris

@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 es solo el primero): Daniel X Moore

Sí. prop es definitivamente la forma adecuada de establecer atributos en un elemento. - cwharris

@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 - Joe Johnston

Tu puedes hacer

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

or

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

Respondido el 29 de diciembre de 11 a las 22:12

también puede ir $ ("# myTable input: checkbox"). each (...); - Chris Brandsma

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

@Michah eliminar el atributo marcado hace que sea imposible restablecer el formulario - mcgrailm

Esta respuesta está desactualizada porque usa .attr en lugar de .prop. - Blazemonger

$("#mycheckbox").click(); funcionó para mí mientras escuchaba el evento de cambio también y .attr & .prop no disparó el evento de cambio. - Damodar Bashyal

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.

Respondido 20 ago 10, 22:08

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

Esta respuesta está desactualizada porque usa .attr en lugar de .prop. - Blazemonger

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

Respondido 03 Feb 09, 20:02

el superior fallará ... marcado no es un miembro de objeto jquery - cuadrado rojo

Esta respuesta está desactualizada porque usa .attr en lugar de .prop. - Blazemonger

OMI el click El evento no es confiable en Firefox y Edge. - Vahid Amiri

Para marcar una casilla de verificación, debe usar

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

or

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

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

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

Si lo hace

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

Respondido el 29 de diciembre de 11 a las 22:12

Esto es inexacto. establecer el atributo 'comprobado' en '' no desmarque las casillas de verificación en al menos Chrome. - cwharris

@xixonia Probé antes de publicar tu violín no funciona porque no cambiaste el menú de la izquierda para incluir jquery - mcgrailm

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

@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. - mcgrailm

@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 de nuevo por ofrecer una crítica aguda que fue, al menos en parte, muy equivocada. - Mark Amery

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.

Respondido 18 Jul 18, 16:07

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, usando la siguiente línea de código:

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

Respondido el 09 de junio de 14 a las 19:06

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

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

Respondido el 13 de diciembre de 14 a las 19:12

Esto no responde a la pregunta (la pregunta es sobre ajuste si una casilla de verificación está marcada, sin 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 que .val() siempre volverá undefined cuando se llama a 0 elementos para detectar que un objeto jQuery está vacío, cuando simplemente puede verificar su .length en su lugar) - ver stackoverflow.com/questions/901712/… para enfoques más legibles. - Mark Amery

Para marcar una casilla de verificación usando jQuery 1.6 o superior solo haz 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ás usando jQuery 1.5 o bajo:

checkbox.attr('checked', true);

Para desmarcar, use:

checkbox.attr('checked', false);

contestado el 09 de mayo de 17 a las 16:05

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>

contestado el 10 de mayo de 16 a las 12:05

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

Respondido 11 Abr '17, 18:04

Esta respuesta está desactualizada porque usa .attr en lugar de .prop. - Blazemonger

Prueba esto:

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

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

Respondido 16 Feb 13, 14:02

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

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

Respondido 11 Abr '17, 18:04

Esta respuesta está desactualizada porque usa .attr en lugar de .prop. - Blazemonger

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

Respondido 16 Feb 13, 14:02

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

Respondido 10 Feb 16, 16:02

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

Otra posible solución:

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

Respondido 21 Jul 14, 13:07

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

contestado el 21 de mayo de 17 a las 14:05

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

Respondido el 11 de enero de 13 a las 17:01

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

En Internet Explorer antes de la versión 9, usar .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 ().

respondido 22 nov., 14:18

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

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

No hay pérdida de memoria en este caso, ya que son configurándolo en un valor primitivo simple (booleano). - Blazemonger

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

Respondido 21 Abr '15, 13:04

Para marcar y desmarcar

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

Respondido el 03 de diciembre de 13 a las 06:12

- 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. - Mark Amery

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

Respondido 16 Jul 13, 06:07

- 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

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

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

or

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

Incluso más corto sería:

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

Esta es a jsFiddle también.

Respondido el 13 de diciembre de 14 a las 19:12

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í

Respondido el 23 de Septiembre de 13 a las 05:09

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

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

Respondido el 15 de diciembre de 14 a las 21:12

no debería ser true y false y no 'true' y 'false'? - tpower

"No funcionó" porque 'false' se convirtió a un valor booleano que resultó en true - cadena vacía se evalúa como false así "funcionó". Ver este violín por ejemplo de lo que quiero decir. - Shadow Wizard está vacunando

@ chris97ong He revertido tu edición; cuando alguien dice "No uses el siguiente código porque no funciona", fijación ese código mientras deja el comentario diciendo que no funciona es dañino, especialmente cuando rompe la explicación en los comentarios de el porqué el código 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

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

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.

respondido 05 mar '15, 16:03

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

Respondido 27 Feb 13, 19:02

En caso de que uses ASP.NET MVC, generar muchas casillas de verificación y luego tener para 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);
        });
    }

respondido 22 nov., 14:18

¿Por qué se necesita cada uno aquí? - tpower

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.