Aktivieren / Deaktivieren der Kontrollkästchen

Ich habe folgendes:

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

Ich möchte, dass id="select-all-teammembers"beim Klicken zwischen aktiviert und deaktiviert umgeschaltet wird. 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"));

Hat aber prop()eine bessere Semantik als attr()bei Anwendung auf "boolesche" HTML-Attribute, so dass dies in dieser Situation normalerweise bevorzugt wird.

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

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

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

Aus diesem Grund funktioniert keine der hier aufgeführten Lösungen, da alle Kontrollkästchen denselben Status haben, anstatt den Status jedes Kontrollkästchens umzuschalten. Doing $(':checkbox').prop('checked')auf viele Kontrollkästchen gibt die logische UND - Verknüpfung zwischen allen .checkedbinären Eigenschaften, dh wenn eine von ihnen nicht markiert ist, ist der zurückgegebene Wert false.

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

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

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

Hier ist ein anderer Weg, den Sie wollen.

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

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

Seit jQuery 1.6 können Sie .prop(function)den aktivierten Status jedes gefundenen Elements umschalten:

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

Verwenden Sie dieses Plugin:

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

   }

Dann

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

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

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

Das Kontrollkästchen Alles aktivieren sollte unter bestimmten Bedingungen selbst aktualisiert werden. Versuchen Sie, auf "# Alle Teammitglieder auswählen" zu klicken , deaktivieren Sie dann einige Elemente und klicken Sie erneut auf "Alle auswählen" . Sie können Inkonsistenzen sehen. Verwenden Sie den folgenden Trick, um dies zu verhindern:

  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 Kontrollkästchen DOM-Objekt wie oben beschrieben zwischengespeichert werden.

Hier ist eine jQuery-Methode zum Umschalten von Kontrollkästchen, ohne ein Kontrollkästchen mit HTML5 und 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

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 leicht 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 ... ich bin mir nicht sicher, warum jeder .attr () oder .prop () verwendet, um Dinge zu (un) überprüfen.

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

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

Sie müssen nur das Kontrollkästchen Klickereignis aufrufen, 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);
});

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

Dieser funktioniert sehr gut für mich.

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

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>

Sie können dies einfach verwenden

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

Meiner Meinung nach ist GigolNet Gigolashvili der richtige Mann, 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
    })
})

Das Setzen von 'markiert' oder null anstelle von wahr oder falsch erledigt die Arbeit.

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

Dieser Code schaltet das Kontrollkästchen um, wenn Sie auf einen in Webvorlagen verwendeten Kippschalter-Animator klicken. Ersetzen Sie ".onoffswitch-label", wie in Ihrem Code verfügbar. "checkboxID" ist das hier umgeschaltete Kontrollkästchen.

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

Nun, es gibt einen einfacheren Weg

Geben Sie Ihren Kontrollkästchen zunächst ein Klassenbeispiel 'id_chk'.

Dann in das Kontrollkästchen, das den Status der Kontrollkästchen 'id_chk' steuert:

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

Das ist alles, hoffe das hilft