Home > Article > Web Front-end > Detailed explanation of the implementation of JavaScript checkbox all-select and inverse-select events
Detailed explanation of the implementation of JavaScript checkbox all-select and inverse-select events
- 黄舟Original
- 2017-09-28 10:43:472020browse
This article mainly introduces javaScript to implement the check box all-select and unselect event in detail. It has a certain reference value. Interested friends can refer to it.
The example in this article shares javaScript with everyone. The specific code to realize the check box selection and inverse selection is for your reference. The specific content is as follows
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>The above is the detailed content of Detailed explanation of the implementation of JavaScript checkbox all-select and inverse-select events. For more information, please follow other related articles on the PHP Chinese website!