js实现全选

原创 2019-07-11 16:37:01 274
摘要: 步骤: 1.声明这两个变量 2.通过id定位到全选框和选框 3.并获取到选框数组的长度用来决定循环的次数 4.利用for循环和if条件语句判断,实现全选<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现全选框</t

步骤:

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>


批改老师:天蓬老师批改时间:2019-07-13 13:16:02
老师总结:全选的实现方式有好几种, 你的这种非常常用

发布手记

热门词条