Cet article présente principalement en détail l'implémentation javaScript de l'événement checkbox all-select et unselect. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
L'exemple dans cet article partage le javaScript avec. tout le monde. Le code spécifique pour réaliser la sélection des cases à cocher et la sélection inverse est pour votre référence. Le contenu spécifique est le suivant
Code
.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script>
window.onload=function(){
var selAll=document.getElementById("selAll");
var hobbys=document.getElementsByName("hobby");
var fx=document.getElementById("fx");
var myClick=document.getElementById("xz");
function myClick(){
alert("hello");
}
//全选事件
selAll.onclick=function(){
if(selAll.checked == true){
for ( var i=0; i<hobbys.length; i++) {
hobbys[i].checked=true;
}
}else{
for ( var i=0; i<hobbys.length; i++) {
hobbys[i].checked=false;
}
}
}
//反选事件
fx.onclick=function(){
for (var i=0; i<hobbys.length; i++) {
var b=hobbys[i];
if (b.checked == true) {
b.checked=false
}else{
b.checked=true;
}
}
}
}
</script>
</head>
<body>
<span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全选</span>
<button id="fx">反选</button></br>
<input type="checkbox" name="hobby" />羽毛球
<input type="checkbox" name="hobby"/>绘画
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞
</body>
</html>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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
