276 Stimmen

Wie implementiert man das Kontrollkästchen "Alles auswählen" in HTML?

Ich habe eine HTML-Seite mit mehreren Kontrollkästchen.

Ich benötige ein weiteres Kontrollkästchen mit dem Namen "select all". Wenn ich dieses Kontrollkästchen auswähle, müssen alle Kontrollkästchen auf der HTML-Seite ausgewählt werden. Wie kann ich dies tun?

1voto

zeros-and-ones Punkte 3795

Hier ist eine Implementierung von backbone.js:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},

1voto

diewland Punkte 1817

Html

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

javascript

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});

1voto

1: Fügen Sie die onwechsel Ereignis-Handler

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: Ändern Sie den Code für die Behandlung von angekreuzten/ungekreuzten

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

0voto

Saengdaet Punkte 1586

Sie können diesen einfachen Code verwenden

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});

0voto

Albert Punkte 1001

Vielleicht ein bisschen spät, aber ich glaube, dass Sie bei einem Kontrollkästchen "Alles ankreuzen" auch das Szenario behandeln sollten, wenn Sie das Kontrollkästchen "Alles ankreuzen" aktiviert haben und dann eines der Kontrollkästchen darunter deaktivieren.

In diesem Fall sollte das Kontrollkästchen für alle automatisch deaktiviert werden.

Auch wenn Sie alle Kontrollkästchen manuell ankreuzen, sollte das Kontrollkästchen für alle automatisch aktiviert werden.

Sie benötigen zwei Ereignisbehandlungsroutinen, eine für das Kästchen "Alles ankreuzen" und eine für das Anklicken eines der einzelnen Kästchen darunter.

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X