Heim >Web-Frontend >js-Tutorial >So stellen Sie „Alle auswählen' in Javascript ein
So stellen Sie „Alle auswählen' in Javascript ein
- 藏色散人Original
- 2021-06-27 10:30:222660Durchsuche
So legen Sie „Alle auswählen“ in Javascript fest: Erstellen Sie zuerst eine HTML-Beispieldatei, fügen Sie dann Skript-Tags hinzu und erstellen Sie schließlich einen JS-Code. Durchlaufen Sie dann jedes Kontrollkästchenobjekt und setzen Sie dessen aktiviertes Attribut auf „True“, um die Funktion „Alle auswählen“ zu erreichen.
Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Wie stelle ich „Alles auswählen“ in Javascript ein?
JavaScript-Implementierung von „Alle auswählen“:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox的全选和取消全选</title>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){
//1.获取checkbox的元素对象
var chElt=document.getElementById("chElt");
//2.获取选中状态
var checkedElt=chElt.checked;
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");
//4.循环遍历取出每一个复选框中的元素
var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<input type="checkbox" id="chElt" οnclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
学习<input type="checkbox" name="interest" value="study"/>
阅读<input type="checkbox" name="interest" value="read"/>
运动<input type="checkbox" name="interest" value="sport"/>
旅行<input type="checkbox" name="interest" value="travel"/>
绘画<input type="checkbox" name="interest" value="draw"/>
音乐<input type="checkbox" name="interest" value="music"/>
</body>
</html>Checkbox-Objekt:
Checkbox-Objekt stellt ein Auswahlfeld in einem HTML-Formular dar.
In einem HTML-Dokument wird jedes Mal ein Checkbox-Objekt erstellt, wenn 2213c9627c391f00ef101b1592023bcb erscheint.
Sie können auf ein Auswahlfeld zugreifen, indem Sie das Elements[]-Array des Formulars durchlaufen oder document.getElementById() verwenden.
checked-Attribut: Das
checked-Attribut legt fest oder gibt zurück, ob das Kontrollkästchen aktiviert werden soll.
Syntax
checkboxObject.checked=true|false
Erläuterung
Dieses Attribut speichert den aktuellen Status des Kontrollkästchens. Immer wenn sich dieser Wert ändert, wird der Onclick-Ereignishandler ausgelöst (der Onchange-Ereignishandler kann ebenfalls ausgelöst werden).
【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】
Das obige ist der detaillierte Inhalt vonSo stellen Sie „Alle auswählen' in Javascript ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!