it-swarm.com.de

Kontrollkästchen ein- / ausschalten

Ich habe folgendes:

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

Ich möchte den id="select-all-teammembers", wenn geklickt wird, um zwischen aktiviert und deaktiviert zu wechseln. Ideen? das sind nicht Dutzende von Codezeilen?

381
AnApprentice

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 haben wir, als wir nur attr () und nicht prop () hatten, geschrieben:

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

Aber prop() hat eine bessere Semantik als attr(), wenn es auf "boolesche" HTML-Attribute angewendet wird, so dass dies in dieser Situation normalerweise bevorzugt wird.

693
//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 
201
user669677

Ich weiß, dass dies alt ist, aber die Frage war etwas mehrdeutig, dass mschalten bedeuten kann, dass jedes Kontrollkästchen seinen Status umschalten sollte, egal was das ist. Wenn Sie 3 aktiviert und 2 deaktiviert haben, werden beim Umschalten die ersten 3 deaktiviert und die letzten 2 aktiviert.

In diesem Fall funktioniert keine der hier beschriebenen Lösungen, da alle Kontrollkästchen denselben Status haben, anstatt den Status der einzelnen Kontrollkästchen zu ändern. Wenn Sie $(':checkbox').prop('checked') für viele Kontrollkästchen ausführen, wird das logische UND zwischen allen .checked Binäreigenschaften zurückgegeben, d. H., Wenn eine davon deaktiviert ist, ist der zurückgegebene Wert false.

Sie müssen .each() verwenden, wenn Sie jeden Kontrollkästchenstatus tatsächlich umschalten möchten, anstatt alle gleich zu machen, z.

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

Beachten Sie, dass Sie im Handler nicht $(this) benötigen, da die Eigenschaft .checked in allen Browsern vorhanden ist.

58
Normadize

Hier ist ein anderer Weg, den Sie wollen.

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

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

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

Seit jQuery 1.6 können Sie .prop(function) verwenden, um den überprüften Zustand jedes gefundenen Elements umzuschalten:

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

Der beste Weg, den ich mir vorstellen kann.

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

oder

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

oder

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}
7
Dblock247

Benutze dieses Plugin:

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

   }

Dann

$('#myCheckBox').toggleCheck();
7
Abdennour TOUMI

Hier ist eine jQuery-Methode zum Umschalten von Kontrollkästchen, ohne ein Kontrollkästchen mit html5 & labels aktivieren zu müssen:

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

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

2
yardpenalty

Unter der Annahme, dass es sich um ein Bild handelt, bei dem das Kontrollkästchen aktiviert werden muss, funktioniert dies für mich

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">
2
user1428592

Das Kontrollkästchen "Alles markieren" sollte unter bestimmten Bedingungen selbst aktualisiert werden . Versuchen Sie, auf '# select-all-teammembers' zu klicken, deaktivieren Sie dann einige Elemente und klicken Sie erneut auf select-all. Sie können Inkonsistenzen sehen. Um dies 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 des DOM-Objekts wie oben beschrieben zwischengespeichert werden.

2
Anatoly

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);
});
1
Hugo Dias

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;
};
<input type="checkbox">
<button>Toggle checkbox</button>
1
vsync

einfach kann man das nutzen

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
1
Fouad Mekkey
<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

Versuchen:

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

Sie können auch so schreiben

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

Es muss nur das Kontrollkästchen click event of aufgerufen werden, wenn der Benutzer auf die Schaltfläche mit der ID '# checkbox-toggle' klickt.

1
Milan Malani
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;
    });
});

;)

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 verschiedene Dinge passieren sollen, und dennoch relativ kurz und einfach zu lesen ist.

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

nebenbei bemerkt ... nicht sicher, warum jeder .attr () oder .prop () verwendet, um Dinge zu (un) prüfen.

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

0
MoonLite

Mit diesem Code wird das Kontrollkästchen umgeschaltet, wenn Sie auf einen in Webvorlagen verwendeten Kippschalter-Animator klicken. Ersetzen Sie ".onoffswitch-label" wie in Ihrem Code verfügbar. "checkboxID" ist das Kontrollkästchen, das hier umgeschaltet wird.

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

meiner Meinung nach ist GigolNet 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
    })
})
0
Arthur Sult

Dieser funktioniert sehr gut für mich.

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

Das Setzen von 'checked' oder 'null' anstelle von 'true' oder 'false' erledigt die Arbeit.

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