JS implementiert CheckBox-Kontrollkästchenauswahl, keine Auswahl oder keine Auswahlfunktion_Javascript-Fähigkeiten-js-Tutorial-php.cn

JS implementiert CheckBox-Kontrollkästchenauswahl, keine Auswahl oder keine Auswahlfunktion_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:16:24

Original

1817 Leute haben es durchsucht

Das CheckBox-Steuerelement zeigt an, ob ein bestimmter Status (d. h. Option) ausgewählt (ein, Wert 1) oder gelöscht (aus, Wert 0) ist. Verwenden Sie dieses Steuerelement in Ihrer Anwendung, um dem Benutzer die Wahl zwischen „Wahr/Falsch“ oder „Ja/Nein“ zu bieten. Da CheckBoxen unabhängig voneinander funktionieren, können Benutzer eine beliebige Anzahl von CheckBoxen gleichzeitig auswählen, um Optionen zu kombinieren.

CheckBox JS implementiert die Funktionen „Alle auswählen“, „Nicht auswählen“ und „Nicht alle auswählen“. Der spezifische Inhalt ist wie folgt

Dinge:

1. Elemente abrufen
2. Alles auswählen, Auswahl aufheben, Auswahl umkehren und Klickereignisse hinzufügen
3. Kontrollkästchen „Für 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 die Beurteilung wahr ist, setzen Sie die Prüfung auf „falsch“, und wenn die Prüfung auf „falsch“ lautet, setzen Sie die Prüfung auf „Wahr“.

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.