Kontrollkästchen ein- / ausschalten

Ich habe folgendes:

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

Ich möchte die id="select-all-teammembers" wenn geklickt wird, um zwischen id="select-all-teammembers" . Ideen? Das sind nicht Dutzende von Codezeilen?

   

Du kannst schreiben:

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

Vor jQuery 1.6, als wir nur attr () und nicht prop () hatten , haben wir geschrieben:

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

Aber prop() hat eine bessere Semantik als attr() wenn es auf “boolesche” HTML-Attribute angewendet wird, daher wird es in dieser Situation normalerweise bevorzugt.

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

Ich weiß, dass das alt ist, aber die Frage war ein wenig mehrdeutig, weil das Umschalten bedeuten könnte, dass jedes Kontrollkästchen seinen Status umschalten sollte, was auch immer das ist. Wenn Sie 3 aktiviert und 2 deaktiviert haben, werden die ersten 3 deaktiviert und die letzten 2 aktiviert.

Keine der Lösungen funktioniert hier, da alle Kontrollkästchen den gleichen Status haben, anstatt den Status jedes Kontrollkästchens zu ändern. Doing $(':checkbox').prop('checked') auf vielen Ankreuzfeldern gibt das logische UND zwischen allen .checked Binary-Eigenschaften zurück, dh wenn einer davon .checked ist, ist der zurückgegebene Wert false .

Sie müssen .each() wenn Sie jeden Checkbox-Status tatsächlich .each() möchten, anstatt alle gleich zu machen, z

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

Beachten Sie, dass $(this) im Handler nicht benötigt wird, da die Eigenschaft .checked in allen Browsern existiert.

Hier ist eine andere Art, die du willst.

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

Ich denke, es ist einfacher, nur einen Klick auszulösen:

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

Seit jQuery 1.6 können Sie .prop(function) verwenden, um den .prop(function) Status jedes gefundenen Elements .prop(function) :

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

Benutze dieses Plugin:

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

Dann

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

Der beste Weg, an den ich denken kann.

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

oder

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

oder

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

Angenommen, es ist ein Bild, das das Kontrollkästchen umschalten muss, funktioniert das für mich

   

Check-all Checkbox sollte unter bestimmten Bedingungen selbst aktualisiert werden. Klicke auf “# select-all-teammembers”, deaktiviere dann einige Elemente und klicke erneut auf “ select-all”. Sie können Inkonsistenz sehen. Um es zu verhindern, benutze den folgenden Trick:

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

Übrigens sollten alle Checkboxen DOM-Objekt wie oben beschrieben zwischengespeichert werden.

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

😉

Sie können auch so schreiben

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

Klicken Sie einfach auf click event des Kontrollkästchens, wenn der Benutzer auf die Schaltfläche mit der ID ‘# checkbox-toggle’ klickt.

Ein besserer Ansatz und 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 }}

Versuchen:

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

Das grundlegendste Beispiel wäre:

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

einfach kannst du das nutzen

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

Wenn Sie jede Box einzeln umschalten möchten (oder nur eine Box funktioniert genauso gut):

Ich empfehle die Verwendung von .each (), da es leicht zu ändern ist, wenn Sie möchten, dass verschiedene Dinge passieren, und immer noch relativ kurz und einfach zu lesen.

z.B :

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

auf einer Seitennotiz … nicht sicher, warum jeder .attr () oder .prop () verwendet, um Dinge zu überprüfen.

Soweit ich weiß, hat element.checked in allen Browsern immer gleich funktioniert?

meiner Meinung nach ist Giganet Gigolashvili der Richtigste, der eine normale Variante vorgeschlagen hat, aber ich möchte eine noch schönere Variante vorschlagen. prüfen Sie

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

Wenn Sie “checked” oder “null” anstelle von “true” bzw. “false” setzen, wird die Arbeit erledigt.

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

Dieser funktioniert sehr gut für mich.

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

Mit diesem Code wird das Kontrollkästchen beim Klicken auf einen in Webvorlagen verwendeten Umschalter aktiviert. Ersetzen Sie “.onoffswitch-label” wie in Ihrem Code verfügbar. “checkboxID” ist das hier angekreuzte Kontrollkästchen.

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

Hier ist ein jQuery Weg, um Kontrollkästchen zu aktivieren, ohne ein Kontrollkästchen mit html5 & Etiketten auswählen:

  

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

Nun, es gibt einen einfacheren Weg

Zuerst Geben Sie Ihren Checkboxen ein classnbeispiel ‘id_chk’

Dann innerhalb der Checkbox, die ‘id_chk’ Checkboxen Status put steuern:

Das ist alles, hoffe das hilft