So stellen Sie „Alle auswählen' in Javascript ein-js-Tutorial-php.cn

So stellen Sie „Alle auswählen' in Javascript ein

藏色散人

Freigeben： 2021-06-27 10:30:48

Original

2594 Leute haben es durchsucht

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.

So stellen Sie „Alle auswählen' in Javascript ein

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>

Nach dem Login kopieren

Checkbox-Objekt:

Checkbox-Objekt stellt ein Auswahlfeld in einem HTML-Formular dar.

In einem HTML-Dokument wird jedes Mal ein Checkbox-Objekt erstellt, wenn 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

Nach dem Login kopieren

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!