js-Methode zum Implementieren der Kontrollkästchen-Vollauswahl, keine Auswahl und inverse Auswahl_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt, wie die vollständige Auswahl, die Nichtauswahl und die umgekehrte Auswahl von Kontrollkästchen in js implementiert werden. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Ideen:

1. Elemente abrufen

2. Klicken Sie auf Ereignisse, um alle auszuwählen, die Auswahl aufzuheben oder die Auswahl umzukehren

3. Kontrollkästchen „For-Schleife verwenden“

4. Setzen Sie das Kontrollkästchen auf „true“, um alle auszuwählen

5. Setzen Sie das Kontrollkästchen auf „false“, um die Auswahl aufzuheben

6. Wenn das Häkchen wahr ist und der ausgewählte Zustand gesetzt ist, wird „geprüft“ auf „falsch“ und „nicht ausgewählt“ gesetzt. Wenn „geprüft“ auf „wahr“ und „nicht ausgewählt“ gesetzt ist.

2. HTML-Code:

<input type="button" value="全选" id="sele"/>
<input type="button" value="不选" id="setinterval"/>
<input type="button" value="反选" id="clear"/>
<div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

3. js-Code:

<script>
window.onload=function(){

  var sele=document.getElementById('sele');//获取全选
  var unsele=document.getElementById('setinterval');//获取不选
  var clear=document.getElementById('clear');//获取反选
  var checkbox=document.getElementById('checkboxs');//获取div
  var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
   sele.onclick=function(){
    for(i=0;i<checked.length;i++){
    checked[i].checked=true
          }
     }

//不选
    unsele.onclick=function(){
      for(i=0;i<checked.length;i++){
       checked[i].checked=false
          }
      }
//反选
    clear.onclick=function(){
       for(i=0;i<checked.length;i++){
        if(checked[i].checked==true){
        checked[i].checked=false
         } 
   else{
     checked[i].checked=true
       }
       }
      }
}
</script>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.