Activa / desactiva las casillas de verificación

Tengo lo siguiente:

$(document).ready(function() { $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").attr('checked', true); }); }); 

Me gustaría que id="select-all-teammembers" cuando se hace clic para alternar entre marcado y desactivado. Ideas? que no son docenas de líneas de código?

Puedes escribir:

 $(document).ready(function() { $("#select-all-teammembers").click(function() { var checkBoxes = $("input[name=recipients\\[\\]]"); checkBoxes.prop("checked", !checkBoxes.prop("checked")); }); }); 

Antes de jQuery 1.6, cuando solo teníamos attr () y no prop () , solíamos escribir:

 checkBoxes.attr("checked", !checkBoxes.attr("checked")); 

Pero prop() tiene una mejor semántica que attr() cuando se aplica a atributos HTML “booleanos”, por lo que generalmente se prefiere en esta situación.

 //this toggles the checkbox, and fires its event if it has $('input[type=checkbox]').trigger('click'); //or $('input[type=checkbox]').click(); 

Sé que esto es antiguo, pero la pregunta era un poco ambigua en cuanto a que alternar puede significar que cada checkbox debe alternar su estado, sea lo que sea. Si tiene 3 marcados y 2 desmarcados, alternar los 3 primeros sin marcar y los 2 últimos marcados.

Para eso, ninguna de las soluciones aquí funciona, ya que hacen que todas las casillas de verificación tengan el mismo estado, en lugar de alternar el estado de cada checkbox. Hacer $(':checkbox').prop('checked') en muchas casillas de verificación devuelve el AND lógico entre todas las propiedades binarias .checked , es decir, si una de ellas está desmarcada, el valor devuelto es false .

Necesita usar .each() si realmente desea alternar cada estado de checkbox en lugar de hacer que todos sean iguales, por ejemplo

  $(':checkbox').each(function () { this.checked = !this.checked; }); 

Tenga en cuenta que no necesita $(this) dentro del controlador ya que la propiedad .checked existe en todos los navegadores.

Aquí hay otra manera que tú quieres.

 $(document).ready(function(){ $('#checkp').toggle( function () { $('.check').attr('Checked','Checked'); }, function () { $('.check').removeAttr('Checked'); } ); }); 

Creo que es más simple simplemente activar un clic:

 $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").trigger('click'); }); 

Desde jQuery 1.6 puede usar .prop(function) para alternar el estado comprobado de cada elemento encontrado:

 $("input[name=recipients\\[\\]]").prop('checked', function(_, checked) { return !checked; }); 

Use este plugin:

 $.fn.toggleCheck =function() { if(this.tagName === 'INPUT') { $(this).prop('checked', !($(this).is(':checked'))); } } 

Entonces

 $('#myCheckBox').toggleCheck(); 

La mejor forma en que puedo pensar

 $('#selectAll').change(function () { $('.reportCheckbox').prop('checked', this.checked); }); 

o

 $checkBoxes = $(".checkBoxes"); $("#checkAll").change(function (e) { $checkBoxes.prop("checked", this.checked); }); 

o

  function toggleAll(sender) { $(".checkBoxes").prop("checked", sender.checked); } 

Asumiendo que es una imagen que tiene que alternar la checkbox, esto funciona para mí

   

La checkbox Marcar-todo debe actualizarse bajo ciertas condiciones. Intenta hacer clic en ‘# select-all-teammembers’ y luego desmarca algunos elementos y vuelve a hacer clic en select-all. Puedes ver inconsistencia. Para evitarlo, usa el siguiente truco:

  var checkBoxes = $('input[name=recipients\\[\\]]'); $('#select-all-teammembers').click(function() { checkBoxes.prop("checked", !checkBoxes.prop("checked")); $(this).prop("checked", checkBoxes.is(':checked')); }); 

Por cierto, todas las casillas de verificación DOM-object deben almacenarse en caché como se describe arriba.

 jQuery("#checker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = true; }); }); jQuery("#dechecker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = false; }); }); jQuery("#checktoggler").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = !this.checked; }); }); 

😉

Puedes escribir así también

 $(function() { $("#checkbox-toggle").click(function() { $('input[type=checkbox][name=checkbox_id\\[\\]]').click(); }); }); 

Solo necesita llamar al evento de clic de la checkbox cuando el usuario haga clic en el botón con id ‘# checkbox-toggle’.

Un mejor enfoque y UX

 $('.checkall').on('click', function() { var $checks = $('checks'); var $ckall = $(this); $.each($checks, function(){ $(this).prop("checked", $ckall.prop('checked')); }); }); $('checks').on('click', function(e){ $('.checkall').prop('checked', false); }); 
 
Select All #ID
{{ order.id }}
{{ order.id }}

Tratar:

 $(".table-datatable .select_all").on('click', function () { $("input[name^='order']").prop('checked', function (i, val) { return !val; }); }); 

El ejemplo más básico sería:

 // get DOM elements var checkbox = document.querySelector('input'), button = document.querySelector('button'); // bind "cilck" event on the button button.addEventListener('click', toggleCheckbox); // when clicking the button, toggle the checkbox function toggleCheckbox(){ checkbox.checked = !checkbox.checked; }; 
   

simplemente puedes usar esto

 $("#chkAll").on("click",function(){ $("input[name=checkBoxName]").prop("checked",$(this).prop("checked")); }); 

si desea alternar cada cuadro individualmente (o solo una casilla funciona igual de bien):

Recomiendo usar .each (), ya que es fácil de modificar si quieres que sucedan cosas diferentes, y aún relativamente corto y fácil de leer.

p.ej :

 // toggle all checkboxes, not all at once but toggle each one for its own checked state: $('input[type="checkbox"]').each(function(){ this.checked = ! this.checked }); // check al even boxes, uncheck all odd boxes: $('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); }); // set all to checked = x and only trigger change if it actually changed: x = true; $('input[type="checkbox"]').each(function(){ if(this.checked != x){ this.checked = x; $(this).change();} }); 

en una nota lateral … no estoy seguro de por qué todos usan .attr () o .prop () para (un) verificar cosas.

hasta donde yo sé, element.checked siempre ha funcionado igual en todos los navegadores.

en mi opinión, el hombre más correcto que sugirió la variante normal es GigolNet Gigolashvili, pero quiero sugerir una variante aún más hermosa. Revisalo

 $(document).on('click', '.fieldWrapper > label', function(event) { event.preventDefault() var n = $( event.target ).parent().find('input:checked').length var m = $( event.target ).parent().find('input').length x = n==m? false:true $( event.target ).parent().find('input').each(function (ind, el) { // $(el).attr('checked', 'checked'); this.checked = x }) }) 

Configurando ‘checked’ o null en lugar de verdadero o falso respectivamente hará el trabajo.

 // checkbox selection var $chk=$(':checkbox'); $chk.prop('checked',$chk.is(':checked') ? null:'checked'); 

Este funciona muy bien para mí.

  $("#checkall").click(function() { var fruits = $("input[name=fruits\\[\\]]"); fruits.prop("checked", $(this).prop("checked")); }); 

Este código alternará la checkbox al hacer clic en cualquier animador de cambio de palanca utilizado en las plantillas web. Reemplace “.onoffswitch-label” como está disponible en su código. “checkboxID” es la checkbox activada aquí.

 $('.onoffswitch-label').click(function () { if ($('#checkboxID').prop('checked')) { $('#checkboxID').prop('checked', false); } else { $('#checkboxID').prop('checked', true); } }); 

Aquí hay una forma jQuery para alternar casillas de verificación sin tener que seleccionar una checkbox con html5 y tags:

  

$("input[name='VIEW']:checkbox").change(function() { if($(this).is(':checked')) { $("input[name='VIEW']:checkbox").prop("checked", false); $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked"); $(this).prop("checked", true); $(this).parent('.normal').addClass('checked'); } else{ $("input[name='VIEW']").prop("checked", false); $("input[name='VIEW']").parent('.normal').removeClass('checked'); } });

http://www.bootply.com/A4h6kAPshx

Bueno, hay una manera más fácil

Primero, dale a tus casillas de verificación un ejemplo de clase ‘id_chk’

Luego, dentro de la checkbox que controlará las casillas de verificación ‘id_chk’:

Eso es todo, espero que esto ayude

    Intereting Posts