¿Configurando "marcado" para jQuery checkbox?

Me gustaría hacer algo similar para marcar la checkbox con jQuery :

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

o

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

¿Hay tal cosa?

3600
09 янв. tpower se establece el 09 de enero 2009-01-09 01:20 '09 a 1:20 2009-01-09 01:20
@ 38 respuestas
  • 1
  • 2

jQuery 1.6 +

Utilice el nuevo método .prop() :

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

jQuery 1.5.xy por 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 modulares de jQuery hasta la versión 1.6 y es preferible utilizar

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

ya que esta última, si la casilla de verificación se estableció inicialmente, cambiará el comportamiento de la llamada .reset() en cualquier forma que la contenga, un cambio sutil, pero probablemente indeseable, en el comportamiento.

Para obtener una descripción más detallada de algunas de las discusiones incompletas sobre cambios en el procesamiento de atributos / propiedades al pasar de 1.5.x a 1.6, puede encontrar en la versión 1.6 y en la documentación de Atributos y Propiedades de .prop() .

Cualquier versión de jQuery

Si trabaja con un solo elemento, siempre puede cambiar la propiedad HTMLInputElement .checked :

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

La ventaja de usar los .prop() y .attr() es que funcionan con todos los elementos consistentes.

5405
09 янв. La respuesta se da Xian 09 Jan. 2009-01-09 01:25 '09 a la 1:25 am 2009-01-09 01:25

Uso:

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

Y si desea comprobar si la casilla está marcada o no:

 $('.myCheckbox').is(':checked'); 
623
09 янв. La respuesta se da bchhun 09 de enero. 2009-01-09 01:25 '09 a la 1:25 am 2009-01-09 01:25

Esta es la forma correcta de marcar y desmarcar casillas usando jQuery, ya que es un estándar multiplataforma y le permite enviar informes.

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

Al mismo tiempo, utiliza los estándares de JavaScript para marcar y desmarcar las casillas de verificación, por lo que cualquier navegador que implemente correctamente la propiedad marcada del elemento de casilla de verificación funcionará perfectamente con este código. Debería ser todos los principales navegadores, pero no puedo probar Internet Explorer 9 antes.

Problema (jQuery 1.6):

Tan pronto como el usuario hace clic en la casilla de verificación, la casilla de verificación deja de responder a los cambios en el atributo "verificado".

Este es un ejemplo del atributo de la casilla de verificación que la tarea no pudo realizar después de que alguien hizo clic en esta casilla de verificación (esto sucede en Chrome).

Feeddle

Solución:

Usando la propiedad JavaScript "verificada" en los elementos DOM , podemos resolver el problema directamente, en lugar de tratar de manipular el DOM para hacer lo que queremos hacer.

Feeddle

Este complemento cambiará la propiedad marcada de cualquier elemento seleccionado por jQuery y marcará y desactivará con éxito las casillas de verificación en cualquier circunstancia. Por lo tanto, aunque esto pueda parecer una decisión innecesaria, hará que su sitio web sea más conveniente 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 el 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; }); 
284
06 мая '11 в 22:31 2011-05-06 22:31 la respuesta es dada por cwharris 06 de mayo de 2011 a las 22:31 2011-05-06 22:31

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 ejecutar, use en su lugar:

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

Puedes desmarcar la casilla eliminando completamente el atributo:

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

Puede marcar todas las casillas de verificación de la siguiente manera:

 $(".myCheckbox").each(function(){ $("#mycheckbox").click() }); 
130
09 янв. respondió Micah 09 de enero 2009-01-09 01:24 '09 a la 1:24 2009-01-09 01:24

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

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

O puede darles nombres más únicos, como mycheck () y myuncheck (), si usa otra biblioteca que usa estos nombres.

67
20 авг. La respuesta se da livefree75 20 ago. 2010-08-20 21:19 '10 a las 21:19 2010-08-20 21:19
 $("#mycheckbox")[0].checked = true; $("#mycheckbox").attr('checked', true); $("#mycheckbox").click(); 

Este último activa un evento de clic para esta casilla de verificación, pero otros no. Por lo tanto, si tiene un código personalizado en el evento onclick para la casilla de verificación que desea ejecutar, use este último.

58
09 янв. La respuesta es dada por Chris Brandsma 09 de enero 2009-01-09 01:36 '09 a la 1:36 2009-01-09 01:36

Para marcar la casilla, debes usar

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

o

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

y para desmarcar la casilla, siempre debe establecer el valor en falso:

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

Si lo haces

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

elimina el atributo juntos y, por lo tanto, no puede restablecer el formulario.

MAL DEMO jQuery 1.6 . Creo que está roto. Para el 1.6, voy a hacer un nuevo post.

NUEVA DEMO DE TRABAJO jQuery 1.5.2 funciona en Chrome.

Ambas demos usan

 $('#tc').click(function() { if ( $('#myCheckbox').attr('checked')) { $('#myCheckbox').attr('checked', false); } else { $('#myCheckbox').attr('checked', 'checked'); } }); 
56
23 марта '11 в 18:22 2011-03-23 18:22 la respuesta la da mcgrailm el 23 de marzo de 2011 a las 6:22 p.m. 2011-03-23 ​​18:22

Asumiendo la pregunta ...

¿Cómo configurar la casilla de verificación POR VALOR?

Recuerde que en una casilla de verificación típica, todas las etiquetas de entrada tienen el mismo nombre, difieren en el atributo de value : no hay un identificador para cada entrada del conjunto.

La respuesta de Xi'an 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); 
42
09 марта '12 в 15:28 2012-03-09 15:28 la respuesta la da Peter Krauss el 9 de marzo de 2012 a las 15:28 2012-03-09 15:28

Echo de menos la solución. Siempre usaré:

 if ($('#myCheckBox:checked').val() !== undefined) { //Checked } else { //Not checked } 
42
24 июня '12 в 14:33 2012-06-24 14:33 Overbeeke da la respuesta el 24 de junio de 2012 a las 14:33 2012-06-24 14:33

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 la propiedad de nombre.

37
20 сент. la respuesta es dada por Abou-Emish 20 sep . 2010-09-20 14:43 '10 a las 2:43 pm 2010-09-20 14:43

Para establecer una bandera usando jQuery 1.6 o superior, haga lo siguiente:

 checkbox.prop('checked', true); 

Para desmarcar la casilla, use:

 checkbox.prop('checked', false); 

Esto es lo que me gusta usar para cambiar una bandera con jQuery:

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

Si está utilizando jQuery 1.5 o inferior:

 checkbox.attr('checked', true); 

Para desmarcar la casilla, use:

 checkbox.attr('checked', false); 
36
14 марта '13 в 12:40 2013-03-14 12:40 La respuesta es dada por Ramon de Jesus el 14 de marzo de 2013 a las 12:40 2013-03-14 12:40

Aquí hay una manera de hacer esto sin jQuery

 <label>Click Me! <input id="cb" type="checkbox" /> </label> <label>Reflection: <input id="rcb" type="checkbox" /> </label> 
33
23 окт. Responder Aeoril 23 de octubre. 2012-10-23 03:41 '12 a las 3:41 am 2012-10-23 03:41

Intenta lo siguiente:

 $('#checkboxid').get(0).checked = true; //For checking $('#checkboxid').get(0).checked = false; //For unchecking 
28
10 сент. La respuesta se da prashanth 10 Sep. 2012-09-10 13:26 '12 a la 1:26 pm 2012-09-10 13:26

Aquí está el código para el marcado y sin marcar usando el 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; }); }); 

Actualizar Aquí está el mismo bloque de código que utiliza el nuevo método de soporte de Jquery 1.6+, 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; }); }); 
25
25 окт. respuesta dada por starjahid 25 de octubre 2011-10-25 11:51 '11 a las 11:51 2011-10-25 11:51

Podemos usar elementObject con jQuery para probar el atributo:

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

Podemos usar esto para todas las versiones de jQuery sin errores.

Actualización: jQuery 1.6+ tiene un nuevo método de prop que reemplaza attr, por ejemplo:

 $(objectElement).prop('checked'); 
23
24 июня '11 в 11:27 2011-06-24 11:27 Prasanth P da la respuesta el 24 de junio de 2011 a las 11:27 2011-06-24 11:27

Si está utilizando el desarrollo de aplicaciones de PhoneGap y tiene un valor en un botón que desea mostrar al instante, no se olvide de hacerlo.

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

Encontré que sin un rango, la interfaz no se actualizará sin importar lo que hagas.

23
17 апр. La respuesta se da Clement Ho 17 de abril. 2012-04-17 09:34 '12 a las 9:34 am 2012-04-17 09:34

Aquí está el código y una 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; } } }); 
22
16 авг. La respuesta se da tamilmani 16 ago. 2013-08-16 09:17 '13 a las 9:17 2013-08-16 09:17

Otra posible solución:

  var c = $("#checkboxid"); if (c.is(":checked")) { $('#checkboxid').prop('checked', false); } else { $('#checkboxid').prop('checked', true); } 
19
12 окт. respuesta dada por Muhammad Aamir Ali el 12 de octubre. 2013-10-12 11:23 '13 a las 11:23 2013-10-12 11:23

Para jQuery 1.6 +

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

Para jQuery 1.5.xy por debajo

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

Para comprobar

 $('.myCheckbox').removeAttr('checked'); 
17
21 апр. La respuesta se da logan 21 abr. 2015-04-21 13:29 '15 a la 1:29 pm 2015-04-21 13:29

Recuerde acerca de las pérdidas de memoria en Internet Explorer antes de Internet Explorer 9 , como el estado de la documentación de jQuery :

En Internet Explorer hasta la versión 9, el uso de .prop () establece un elemento DOM para cualquier otra cosa que no sea un simple valor primitivo (número, cadena o booleano) puede causar una pérdida de memoria si la propiedad no se elimina (usando .removeProp ()) antes de eliminar Elemento DOM del documento. Configuración segura de valores para objetos DOM sin memoria de fugas, use .data ().

17
22 мая '13 в 10:25 2013-05-22 10:25 la respuesta se da naor 22 de mayo de '13 a 10:25 2013-05-22 10:25

Si está utilizando un teléfono móvil y desea que la interfaz se actualice y la casilla de verificación se muestre como desactivada, use lo siguiente:

 $("#checkbox1").prop('checked', false).checkboxradio("refresh"); 
17
11 янв. La respuesta la da Matt Peacock el 11 de enero. 2013-01-11 16:05 '13 a las 16:05 2013-01-11 16:05

Para marcar y desmarcar

 $('.myCheckbox').prop('checked', true); $('.myCheckbox').prop('checked', false); 
16
14 нояб. La respuesta se da jj2422 14 nov. 2013-11-14 09:34 '13 a las 9:34 2013-11-14 09:34
 $('controlCheckBox').click(function(){ var temp = $(this).prop('checked'); $('controlledCheckBoxes').prop('checked', temp); }); 
15
16 июля '13 в 5:10 2013-07-16 05:10 se da la respuesta mahmoh 16 de julio de 13 a las 5:10 a.m. 2013-07-16 05:10

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

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

o

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

Aún más corto será:

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

Aquí está jsFiddle .

14
27 мая '14 в 18:11 2014-05-27 18:11 La respuesta la da Frieder el 27 de mayo de 2014 a las 18:11 2014-05-27 18:11

JavaScript regular 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í

13
18 сент. La respuesta la da Alex W 18 sep. 2013-09-18 04:14 '13 a las 4:14 2013-09-18 04:14

Cuando marca la casilla, por ejemplo:

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

esto puede no ser suficiente También debe llamar a la función de abajo;

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

Especialmente cuando se eliminó la casilla de verificación comprobar atributo.

12
05 марта '15 в 16:10 2015-03-05 16:10 La respuesta la da Serhat Koroglu el 5 de marzo de 2015 a las 16:10 2015-03-05 16:10

No pude hacerlo funcionar usando:

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

Tanto verdadero como falso establecen una bandera. Lo que funcionó para mí:

 $("#cb").prop('checked', 'true'); // For checking $("#cb").prop('checked', ''); // For unchecking 
11
05 янв. La respuesta se da fredcrs 05 jan. 2012-01-05 16:26 '12 a las 4:26 pm 2012-01-05 16:26

Como dijo @ livefree75:

jQuery 1.5.xy por 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 simplemente puedes hacer:

  $(":checkbox").check(); $(":checkbox").uncheck(); 
11
23 сент. La respuesta es dada por Ardalan Shahgholi el 23 de septiembre. 2016-09-23 21:43 '16 a las 21:43 2016-09-23 21:43

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
10 июня '13 в 16:17 2013-06-10 16:17 la respuesta la da ijarlax el 10 de junio de 2013 a las 16:17 2013-06-10 16:17

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
27 февр. respuesta dada por el usuario1477929 el 27 de febrero 2013-02-27 18:49 '13 a las 6:49 pm 2013-02-27 18:49
  • 1
  • 2