原生作业--全选反选
程序员文章站
2022-05-31 10:56:26
...
原生作业–全选反选
代码如下：
<body>
<button id="btn1">全选</button>
<button id="btn2">反选</button>
<button id="btn3">取消</button>
<ul id="chk">
<li><input type="checkbox">选项</li>
<li><input type="checkbox">选项</li>
<li><input type="checkbox">选项</li>
<li><input type="checkbox">选项</li>
<li><input type="checkbox">选项</li>
</ul>
<script>
var btns = document.getElementsByTagName("button");
var input = document.getElementsByTagName("input");
// function $(checkbox) {
// return document.getElementById(checkbox);
// }
btns[0].onclick = function () { //$("btn1").onclick=function(){
for (i = 0; i < input.length; i++) {
input[i].checked = true;
}
}
btns[1].onclick = function () {
for (i = 0; i < input.length; i++) {
if (input[i].checked == true) { //input[i].checked=!input[i].checked
input[i].checked = false;
} else{
input[i].checked = true;
}
}
}
btns[2].onclick = function () {
for (i = 0; i < input.length; i++) {
input[i].checked = false
}
}
</script>
示图如下：