Kontrollkästchen ein/aus schalten

Question

Ich habe die folgenden:

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

Ich möchte die id="select-all-teammembers" wenn sie angeklickt wird, um zwischen angekreuzt und nicht angekreuzt zu wechseln. Ideen? die nicht Dutzende von Codezeilen sind?

Answer 1

Sie können 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() schrieben wir früher:

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

Aber prop() hat eine bessere Semantik als attr() wenn sie auf "boolesche" HTML-Attribute angewandt wird, daher wird sie in dieser Situation normalerweise bevorzugt.

Answer 2

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

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

Answer 3

Ich weiß, dass diese Frage alt ist, aber sie war insofern etwas zweideutig, als dass umzuschalten. kann bedeuten, dass jedes Kontrollkästchen seinen Zustand umschalten sollte, was auch immer das ist. Wenn Sie 3 angekreuzt und 2 nicht angekreuzt haben, dann würde das Umschalten die ersten 3 nicht angekreuzt und die letzten 2 angekreuzt machen.

Deshalb funktioniert keine der hier vorgestellten Lösungen, da alle Kontrollkästchen denselben Status haben, anstatt den Status jedes einzelnen Kontrollkästchens umzuschalten. Tun $(':checkbox').prop('checked') bei mehreren Kontrollkästchen ergibt das logische UND zwischen allen .checked binäre Eigenschaften, d.h. wenn eine dieser Eigenschaften nicht angekreuzt ist, ist der zurückgegebene Wert false .

Sie müssen Folgendes verwenden .each() wenn Sie die Zustände der einzelnen Kontrollkästchen tatsächlich umschalten wollen, anstatt sie alle gleich zu machen, z. B.

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

Beachten Sie, dass Sie nicht brauchen $(this) innerhalb des Handlers als die .checked Eigenschaft ist in allen Browsern vorhanden.

Answer 4

Hier ist eine weitere Möglichkeit, die Sie wünschen.

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

Answer 5

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