Comment définir tout sélectionner en javascript-js tutoriel-php.cn

Comment définir tout sélectionner en javascript

藏色散人

Libérer： 2021-06-27 10:30:48

original

2659 Les gens l'ont consulté

Comment définir la sélection de tout en JavaScript : créez d'abord un exemple de fichier HTML ; puis ajoutez des balises de script et créez du code js. Enfin, parcourez chaque objet de case à cocher et définissez son attribut vérifié sur true pour obtenir la fonction de sélection de tout. . Peut.

Comment définir tout sélectionner en javascript

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Comment définir la sélection de tout en javascript ?

Implémentation JavaScript de tout sélectionner :

<!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>

Copier après la connexion

Objet Checkbox :

L'objet Checkbox représente une zone de sélection dans un formulaire HTML.

Chaque fois que apparaît dans un document HTML, un objet Checkbox est créé.

Vous pouvez accéder à une zone de sélection en parcourant le tableau elements[] du formulaire ou en utilisant document.getElementById() .

attribut checked :

l'attribut checked définit ou renvoie si la case à cocher doit être cochée.

Syntaxe

checkboxObject.checked=true|false

Copier après la connexion

Explication

Cet attribut enregistre l'état actuel de la case à cocher Chaque fois que cette valeur change, le gestionnaire d'événement onclick se déclenche (il peut également déclencher l'événement onchange. gestionnaire).

[Apprentissage recommandé : Tutoriel JavaScript avancé]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!