js实现全选
步骤:
1.声明这两个变量
2.通过id定位到全选框和选框
3.并获取到选框数组的长度用来决定循环的次数
4.利用for循环和if条件语句判断,实现全选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现全选框</title>
<style>
.box{
width: 120px;
padding: 20px;
border-radius: 6px;
background-color: #00a5e0;
color: #fff;
font-size: 16px;
}
#quan{
border-bottom:1px solid #fff;
margin-bottom: 10px;
padding-bottom: 10px;
}
.box div{
padding:5px 0;
}
</style>
</head>
<body>
<script>
function All() {
var all,item;
all=document.getElementById('all');
item = document.getElementsByName('item[]');
for(var i=0;i<item.length;i++){
if(all.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
</script>
<div>
<div id="quan">
<input type="checkbox" name="all" id="all" onclick="All()">
<label for="all">全选</label>
</div>
<div>
<input type="checkbox" name="item[]">
<label for="check">选择1</label>
</div>
<div>
<input type="checkbox" name="item[]" >
<label for="check">选择2</label>
</div>
<div>
<input type="checkbox" name="item[]" >
<label for="check">选择3</label>
</div>
<div>
<input type="checkbox" name="item[]">
<label for="check">选择4</label>
</div>
<div>
<input type="checkbox" name="item[]">
<label for="check">选择5</label>
</div>
<div>
<input type="checkbox" name="item[]" id="check">
<label for="check">选择6</label>
</div>
</div>
</body>
</html>