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

Question

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?

Answer 1

Die die Arbeit erledigen sollten:

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

Answer 2

Da ich mich nicht äußern kann, hier als Antwort: Ich würde die Lösung von Can Berk Güder etwas allgemeiner formulieren, so dass Sie die Funktion für andere Kontrollkästchen wiederverwenden können

<script language="JavaScript">
  function toggleCheckboxes(source, cbName) {
    checkboxes = document.getElementsByName(cbName);
    for (var i = 0, n = checkboxes.length; i < n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

Answer 3

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type="text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>

Answer 4

Sie haben vielleicht verschiedene Gruppen von Kontrollkästchen auf demselben Formular . Hier ist eine Lösung, die Kontrollkästchen nach Klassennamen auswählt/abwählt, unter Verwendung der Vanilla-Javascript-Funktion document.getElementsByClassName

Die Schaltfläche Alles auswählen

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

Einige der auszuwählenden Kontrollkästchen

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

Das Javascript

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }

Answer 5

Dies ist, was dies tun wird, zum Beispiel, wenn Sie 5 Kontrollkästchen haben, und Sie klicken Sie auf check all, es check all, jetzt, wenn Sie deaktivieren Sie alle Kontrollkästchen wahrscheinlich durch Anklicken jedes 5 Kontrollkästchen, durch die Zeit, die Sie deaktivieren Sie die letzte Checkbox, die select all Checkbox wird auch deaktivieren

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })