Wie implementiere ich das Kontrollkästchen "Alle auswählen" in HTML?

218

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

Ich brauche noch ein Kontrollkästchen mit dem Namen "Alle auswählen". Wenn ich dieses Kontrollkästchen aktiviere, müssen alle Kontrollkästchen auf der HTML-Seite aktiviert sein. Wie kann ich das machen?

user48094
quelle
1
Wenn Sie sich elegant verschlechtern möchten, sollte die Auswahl von "Alle auswählen" tatsächlich bedeuten, dass alle unabhängig von ihrem individuellen Status ausgewählt werden. (Besuch Ihrer Seite mit deaktiviertem Javascript)
einige
In Firefox (und vielleicht auch in anderen?): Drücken Sie CTRL+SHIFT+K, um die Konsole zu öffnen, und fügen Sie dann ein : $("input:checkbox").attr('checked', true)und drücken Sie Enter. Alle Kontrollkästchen auf der aktuellen Seite sollten jetzt aktiviert sein. Zum Deaktivieren der Änderung Truevon False.
Ashleedawg

Antworten:

308
<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> 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/>

AKTUALISIEREN:

Das for each...inKonstrukt scheint zumindest in diesem Fall in Safari 5 oder Chrome 5 nicht zu funktionieren. Dieser Code sollte in allen Browsern funktionieren:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
Kann Berk Güder
quelle
1
für jeden (var checkbox in checkboxes) ----------------------------------- sollte: für (var Checkbox in Kontrollkästchen)
HelloWorld
@HelloWorld: für jedes ... in ist tatsächlich Javascript gültig: developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… Aber wie porneL betont hat, ist es ein obskures Konstrukt. Außerdem funktioniert dieser Code nicht in Safari 5 oder Chrome 5. Er funktioniert in FF 3.6 und IIRC in Safari 4. for(var i in checkboxes) checkboxes[i].checked = source.checkedIn allen Browsern.
Kann Berk Güder
3
Niemals for inmit einer Sammlung oder einem Array verwenden
mplungjan
1
Warum machst du , n=checkboxes.length;i<nstatt nur i < checkboxes.length? Um die Funktion generisch zu machen (Wiederverwendung von Code), übergeben Sie einen zusätzlichen Parameter: (source, checkboxes_name)und tun document.getElementsByName(checkboxes_name);Es ist besser, als den Namen fest zu codieren und die Funktion für einen bestimmten Satz von Kontrollkästchen spezifisch zu machen.
ADTC
3
Okay, da meine Bearbeitung aus irgendeinem Grund abgelehnt wurde, werde ich hier wohl einen Kommentar abgeben. Das for-each-Konstrukt ist veraltet und funktioniert nicht! Sie müssen seinen Ersatz verwenden : for(let checkbox of checkboxes).
Forresthopkinsa
126

Verwenden von jQuery :

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

HTML:

<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />
davydepauw
quelle
24
Ich würde eine else-Klausel hinzufügen, um den Anwendungsfall für die Abwahl zu behandeln. }
Smaragdjava
4
Wenn Sie das if und else weglassen und trotzdem die Abwahl durchführen möchten, können Sie dies folgendermaßen tun: var state = this.checked; $ (': checkbox'). each (function () {this.checked = state;});
Assil
85

Ich bin mir nicht sicher, ob jemand auf diese Weise nicht geantwortet hat (mit jQuery ):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

Es ist sauber, hat keine Schleifen oder if / else-Klauseln und wirkt wie ein Zauber.

Fiatjaf
quelle
4
Nur drei Zeilen, einfach => leicht zu verstehen und auch zum Abwählen geeignet. Danke dir.
TeeJay
61

Um die Auswahl aufzuheben:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});
Var
quelle
2
wenn und sonst nicht benötigt wird ... verwenden Sie this.checkedstattdessen
m13r
46

Ich bin überrascht, dass niemand etwas erwähnt hat document.querySelectorAll(). Reine JavaScript-Lösung, funktioniert in IE9 +.

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}
<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

Sumit
quelle
1
Dies funktionierte in Chrome, aber ich hatte viele Kontrollkästchen aus verschiedenen Gründen. Anstatt auf 'type = "checkbox"' zu zielen, zielte ich auf 'name = "myobject"' und es funktionierte auch.
Rich701
Vielleicht sollte dies in die neue richtige Antwort geändert werden, wenn nicht eine Diskussion hilfreich wäre. :-)
Jesse Steele
Diese Antwort war viel einfacher in vorhandene Seiten zu implementieren als die anderen Antworten. Gut gemacht.
TS
16

Demo http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>
merakli
quelle
1
Für mich funktioniert es nur für einen einzelnen Zyklus. Es schaltet nur einmal um, dann macht es nichts.
Mrudult
Es ist also die attr()Methode, die ich denke. änderte es zuprop()
mrudult
Wenn ich ein Element aus der Liste abwähle, sollte das Kontrollkästchen Alle auswählen auch nicht deaktiviert sein.
some_other_guy
10

Leicht geänderte Version, die respektvoll überprüft und deaktiviert

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });
p0rsche
quelle
10

Wenn Sie anrufen document.getElementsByName("name"), erhalten Sie eine Object. Verwenden Sie .item(index)diese Option, um alle Elemente von a zu durchlaufenObject

HTML:

<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​"><input type=​"checkbox" name=​"rfile" value=​"/​includes/​"><input type=​"checkbox" name=​"rfile" value=​"/​misc/​"><input type=​"checkbox" name=​"rfile" value=​"/​modules/​"><input type=​"checkbox" name=​"rfile" value=​"/​profiles/​"><input type=​"checkbox" name=​"rfile" value=​"/​scripts/​"><input type=​"checkbox" name=​"rfile" value=​"/​sites/​"><input type=​"checkbox" name=​"rfile" value=​"/​stats/​"><input type=​"checkbox" name=​"rfile" value=​"/​themes/​">
Chen Yang
quelle
9
<html>

<head>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />

<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>

</html>
KarenAnne
quelle
9

Meine einfache Lösung ermöglicht es, alle Kontrollkästchen in einem bestimmten Teil des Formulars selektiv zu aktivieren / deaktivieren , wobei für jedes Kontrollkästchen unterschiedliche Namen verwendet werden, damit sie nach dem POST des Formulars leicht erkannt werden können.

Javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

HTML-Beispiel:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
    <p><input type="checkbox" name="colin" />Firth, Colin</p>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>

Ich hoffe du magst es!

Giorgio Barchiesi
quelle
9

Probieren Sie diese einfache JQuery aus:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});
Divyank Sabhaya
quelle
1
Sie können dies vereinfachen $(':checkbox').prop('checked', this.checked), ohne dass die Bedingung erforderlich ist.
Summe
7

JavaScript ist die beste Wahl. Der folgende Link gibt ein Beispiel mit Schaltflächen zum Deaktivieren / Auswählen aller. Sie können versuchen, es so anzupassen, dass es ein Kontrollkästchen verwendet. Verwenden Sie einfach das onClick-Attribut "Alle auswählen".

Javascript-Funktion zum Aktivieren oder Deaktivieren aller Kontrollkästchen

Diese Seite hat ein einfacheres Beispiel

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

Cogsy
quelle
7

Dieses Beispiel funktioniert mit nativem JavaScript, bei dem der Name der Kontrollkästchenvariablen variiert, dh nicht alle "foo".

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
    {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
  checkboxes = getcheckboxes();
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>


<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

</body>
</html>
Joseph Saad
quelle
2
Ihre getcheckboxesFunktion könnte ersetzt werden durchdocument.querySelectorAll('input[type=checkbox]');
Kaiido
4
<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>
Charles
quelle
3

das sollte die Arbeit erledigen:

    $(':checkbox').each(function() {
        this.checked = true;                        
    });
Rachid O.
quelle
2
$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });
xrcwrn
quelle
2

Verwenden von jQuery und Knockout:

Wenn dieses verbindliche Haupt-Kontrollkästchen mit den zugrunde liegenden Kontrollkästchen synchron bleibt, wird es deaktiviert, sofern nicht alle Kontrollkästchen aktiviert sind.

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

in html:

<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>
blazkovicz
quelle
Ich weiß nicht genug über Knockout (ich verwende ko3.4 von cdnjs.cloudflare.com, aber das oben genannte scheint überhaupt nicht zu funktionieren. Ich kann beim ersten init: call einen Haltepunkt setzen, der beim Laden der Seite ausgelöst wird (was ich für richtig halte), aber wenn Sie darauf eingehen, erhalten Sie nichts - der Rest der Funktion wird nicht ausgeführt. Setzen Sie den Haltepunkt für die anderen Funktionen, und sie werden nie ausgelöst.
Tony Suffolk 66
Tony Suffolk, dort sind zwei Ereignishandler festgelegt: onclick und onchange for checkbox, und der Wert des Kontrollkästchens wird am Ende des Codes aktualisiert. Wenn dieser Code in Ihrem Projekt nicht funktioniert, aktivieren Sie das Kontrollkästchen Datenbindungsattribut für.
Blazkovicz
2

Möglicherweise haben Sie verschiedene Kontrollkästchen im selben Formular . Hier ist eine Lösung, mit der Kontrollkästchen nach Klassennamen mithilfe der Vanille-Javascript-Funktion document.getElementsByClassName aktiviert / deaktiviert werden

Die Schaltfläche Alle auswählen

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

Einige der zu aktivierenden 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;
        }
    }
Nicolas Giszpenc
quelle
1
Es funktioniert. Bitte überprüfen Sie codepen.io/kustomweb/pen/gZqwLV
Nicolas Giszpenc
2

Dies ist beispielsweise der Fall, wenn Sie 5 Kontrollkästchen haben und auf Alle aktivieren klicken. Wenn Sie jetzt alle Kontrollkästchen deaktivieren, wahrscheinlich durch Klicken auf jeweils 5 Kontrollkästchen, aktivieren Sie das Kontrollkästchen, wenn Sie das letzte Kontrollkästchen deaktivieren Alle Kontrollkästchen werden ebenfalls deaktiviert

$("#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)
      }
  })
samezedi
quelle
2

Da ich dies nicht kommentieren kann, hier als Antwort: Ich würde die Lösung von Can Berk Güder allgemeiner schreiben, damit 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/>
user219901
quelle
Vielen Dank an Khaldi und Clarity für den Hinweis auf die fehlende Klammer!
user219901
2

Wenn Sie die oberste Antwort für jquery übernehmen, denken Sie daran, dass das an die Klickfunktion übergebene Objekt ein EventHandler ist und nicht das ursprüngliche Kontrollkästchenobjekt. Daher sollte der Code wie folgt geändert werden.

Html

<input type="checkbox" name="selectThemAll"/> 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/>

Javascript

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})
Khylo
quelle
Der erste Eingabetyp ist nicht nur falsch, sondern auch nach der Korrektur hat dies bei mir nicht funktioniert
Fehlermeldungen
1

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

},
Nullen und Einsen
quelle
1

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);
});
diewland
quelle
1

1: Fügen Sie den onchange- Ereignishandler hinzu

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

2: Ändern Sie den Code, um aktiviert / deaktiviert zu behandeln

 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;
             }
         }
     }
 }
Sudhir Vishwakarma
quelle
Bitte kopieren Sie keinen Einfügecode
java_dude
1

Die folgenden Methoden sind sehr einfach zu verstehen und Sie können vorhandene Formulare in wenigen Minuten implementieren

Mit Jquery,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

in HTML-Form unter Schaltflächen setzen

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

Mit nur Javascript,

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

in HTML-Form unter Schaltflächen setzen

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>
dipenparmar12
quelle
0

Sie können diesen einfachen Code verwenden

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

um es in einer Kurzversion mit jQuery zu machen

Das Kontrollkästchen Alle auswählen

<input type="checkbox" id="chkSelectAll">

Das Kontrollkästchen für Kinder

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

jQuery

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})
Somwang Souksavatd
quelle
0

Vielleicht etwas spät, aber wenn Sie ein Kontrollkästchen für alle aktivieren, sollten Sie meines Erachtens auch das Szenario behandeln, in dem Sie das Kontrollkästchen für alle aktiviert haben und dann eines der folgenden Kontrollkästchen deaktivieren.

In diesem Fall sollte das Kontrollkästchen Alle automatisch deaktivieren.

Wenn Sie alle Kontrollkästchen manuell aktivieren, sollte das Kontrollkästchen "Alle aktivieren" automatisch aktiviert werden.

Sie benötigen zwei Ereignishandler, einen für das Kontrollkästchen Alle und einen für das Klicken auf eines der folgenden Kästchen.

// 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"));
}
Albert
quelle
-2

Einfach und auf den Punkt:

jQuery - Beim Klicken auf eine Schaltfläche oder ein div oder ein Beschriftungselement. Aktivieren Sie alle Kontrollkästchen auf der Seite. Denken Sie daran, dass Sie Folgendes anpassen müssen: Kontrollkästchen, um es genauer zu machen.

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});
Patoshi パ ト シ
quelle