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

JS编写全选和反选功能

2018-01-08 21:48 323 查看
这是成果展示（界面很丑不要介意，重点在功能）



代码也很简单，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var checkAll=document.getElementById("checkAll");
var uncheck=document.getElementById("uncheck");
checkAll.onclick=function(){
var options=document.getElementsByName("item");
for(var i=0;i<options.length;i++){
options[i].checked=true;
}
}
uncheck.onclick=function(){
var options=document.getElementsByName("item");
for(var i=0;i<options.length;i++){
if(options[i].checked==true)
options[i].checked=false;
else
options[i].checked=true;
}
}
}
</script>
</head>
<body>
<input type="button" name="uncheck" id="uncheck" value="反选"> <br>
<input type="checkbox" name="item" id="">选项<br>
<input type="checkbox" name="item" id="">选项<br>
<input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br><input type="checkbox" name="item" id="">选项<br>
<input type="button" name="checkAll" id="checkAll" value="全选">
</body>
</html>反选的if-else判断也可以写成这样，代码瞬间就简洁了
uncheck.onclick=function(){
var options=document.getElementsByName("item");
for(var i=0;i<options.length;i++){

options[i].checked=!options[i].checked;
}
}

本文为原创，转载请注明作者，每天坚持学习一点点！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航