<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check wonderful</title>
</head>
<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++) {
}else{
for (var i = 0; i < lis.length; 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>
<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可控制所有按钮的被选择状态)
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>
希望上面的demo会给大家带来一些小小的帮助,本人也希望广大朋友一起来交流,嘿嘿 想在这条路上越走越远~~~