Activer / désactiver les cases à cocher

J’ai ce qui suit:

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

Je voudrais que id="select-all-teammembers" quand on clique dessus pour basculer entre coché et décoché. Des idées? ce ne sont pas des dizaines de lignes de code?

Tu peux écrire:

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

Avant jQuery 1.6, lorsque nous avions seulement attr () et non prop () , nous écrivions:

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

Mais prop() a une meilleure sémantique que attr() lorsqu’il est appliqué à des atsortingbuts HTML “booléens”, donc il est généralement préférable dans cette situation.

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

Je sais que c’est vieux, mais la question était un peu ambiguë dans le fait que cette case à cocher peut signifier que chaque case à cocher devrait basculer son état, peu importe ce que c’est. Si vous avez coché 3 et 2 décochés, le basculement rendrait les 3 premiers décochés et les 2 derniers cochés.

Pour cela, aucune des solutions ne fonctionne car elles font que toutes les cases à cocher ont le même état, au lieu de basculer l’état de chaque case à cocher. Faire $(':checkbox').prop('checked') sur de nombreuses cases à cocher renvoie le AND logique entre toutes les propriétés binarys .checked , c.-à-d. .checked si l’une d’elles est décochée, la valeur renvoyée est false .

Vous devez utiliser .each() si vous voulez basculer chaque état des cases à cocher plutôt que de les rendre toutes égales, par exemple

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

Notez que vous n’avez pas besoin de $(this) dans le gestionnaire car la propriété .checked existe dans tous les navigateurs.

Voici un autre moyen que vous voulez.

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

Je pense que c’est plus simple de déclencher un clic:

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

Depuis jQuery 1.6, vous pouvez utiliser .prop(function) pour basculer l’état vérifié de chaque élément trouvé:

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

Utilisez ce plugin:

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

alors

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

La meilleure façon de penser.

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

ou

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

ou

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

En supposant que c’est une image qui doit cocher la case, cela fonctionne pour moi

   

La case à cocher Check-All doit être mise à jour sous certaines conditions. Essayez de cliquer sur “# select-all-teammembers”, puis décochez quelques éléments et cliquez à nouveau sur select-all. Vous pouvez voir des incohérences. Pour l’empêcher, utilisez l’astuce suivante:

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

BTW toutes les cases à cocher L’object DOM doit être mis en cache comme décrit ci-dessus.

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

😉

Vous pouvez écrire comme ça aussi

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

Il suffit d’appeler la case à cocher click event of lorsque l’utilisateur clique sur le bouton avec l’ID «# checkbox-toggle».

Une meilleure approche et 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 }}

Essayer:

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

L’exemple le plus fondamental serait:

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

tout simplement vous pouvez l’utiliser

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

Si vous voulez basculer chaque boîte individuellement (ou une seule boîte fonctionne aussi bien):

Je recommande d’utiliser .each (), car il est facile à modifier si vous voulez que différentes choses se produisent, et qu’elles soient relativement courtes et faciles à lire.

par exemple :

 // 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 sortinggger change if it actually changed: x = true; $('input[type="checkbox"]').each(function(){ if(this.checked != x){ this.checked = x; $(this).change();} }); 

sur une note de côté … je ne sais pas pourquoi tout le monde utilise .attr () ou .prop () pour (dé) vérifier les choses.

autant que je sache, element.checked a toujours fonctionné de la même manière dans tous les navigateurs?

à mon avis, GigolNet Gigolashvili est l’homme qui a suggéré une variante normale, mais je voudrais suggérer une variante encore plus belle. Vérifie ça

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

Si vous définissez ‘checked’ ou null au lieu de true ou false, cela fera le travail.

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

Celui-ci fonctionne très bien pour moi.

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

Ce code activera la case à cocher en cliquant sur un animateur à bascule utilisé dans les modèles Web. Remplacez “.onoffswitch-label” comme disponible dans votre code. “checkboxID” est la case à cocher ici.

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

Voici un moyen jQuery pour activer ou désactiver les cases à cocher sans avoir à sélectionner une case à cocher avec html5 & labels:

  

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

Eh bien, il y a un moyen plus facile

Commencez par donner à vos cases à cocher un exemple de classe ‘id_chk’

Ensuite, à l’intérieur de la case à cocher qui contrôlera les cases à cocher ‘id_chk’, placez:

C’est tout, j’espère que ça aide