您的位置：首页 > Web前端 > JavaScript

javaScript实现复选框全选反选事件详解

2017-09-27 14:47 711 查看

本文实例为大家分享了javaScript实现复选框全选反选的具体代码，供大家参考，具体内容如下

代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 复选框全选反选

相关文章推荐

新的分享

章节导航