返回js实现全选...登陆

js实现全选

辰晨2019-07-11 16:37:0134

步骤:

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>


最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网