<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>check wonderful</title></head>
<body>
<!-- 基本布局--><input type="button" value="全选"><input type="checkbox" id="sure"><ol id="list"> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li> <li><input type="checkbox" id="be"></li>
</ol></body><script type="text/javascript"> var sure = document.getElementById(‘sure‘); //获取id名位sure的元素 var list = document.getElementById("list");//获取id名位list的元素 var lis = list.getElementsByTagName(‘input‘);//定义一个变量为lis的元素来获取list内的input标签 var index =0; //定义index来计数 sure.onclick = function(){ if(sure.checked ==true){ for (var i = 0; i < lis.length; i++) { lis[i].checked=true; index=10; } }else{ for (var i = 0; i < lis.length; i++) { lis[i].checked = false; index=0; } } } //以上是对全选框做得函数(只要sure被点击 则全部被选中，否则都不选中。即sure可控制所有按钮的被选择状态) for (var i = 0; i < lis.length; i++) {//获取一下i的范围 lis[i].onclick = function(){//对每个lis[i]设置一个点击函数 如果为真 index++（自增1） if(this.checked ==true){ index++; console.log(index);//通过console.log可以实时查看当前index的值 if(index ==lis.length){//当index的值为i(也就是说明ol下面的所有复选框被选中了) sure.checked=true;//全选框将会自动被选中 } }else{ index--; //假如lis[i]没有被选中 那么index的值减一 sure.checked=false;//只要是lis[i]没有全部被选中，sure就默认不被选中 } } }</script></html>
原文地址：https://www.cnblogs.com/hdg-caiqi/p/8398930.html
时间： 2024-10-02 04:24:18