这是成果展示(界面很丑不要介意,重点在功能)
代码也很简单,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function(){
var checkAll=document.getElementById("checkAll");
var uncheck=document.getElementById("uncheck");
checkAll.οnclick=function(){
var options=document.getElementsByName("item");
for(var i=0;i<options.length;i++){
options[i].checked=true;
}
}
uncheck.οnclick=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.οnclick=function(){
var options=document.getElementsByName("item");
for(var i=0;i<options.length;i++){
options[i].checked=!options[i].checked;
}
}
本文为原创,转载请注明作者,每天坚持学习一点点!