返回js控制div......登陆

js控制div全选框

Goshawk2018-12-03 19:43:33234

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js-全选</title>

<style type="text/css">

.box{

width: 120px;

height: 250px;

border: 1px solid  black;

border-radius: 5px;

padding: 5px 10px;

margin: 20px auto;

}

.box div{

border-bottom: 1px solid  black;/*下边框线*/

padding-bottom: 10px;

margin-bottom: 8px;

}

.box input{

margin: 8px;

}

</style>

<script type="text/javascript">

function checkall () {

//声明2个变量

var cheakall,item;

cheakall=document.getElementById("checkall");//获取全选

item=document.getElementsByName("item[]");//获取下面的勾选框

for (var i=0;i<=item.length;i++) {//i小于勾选框的长度

if (cheakall.checked) {//如果多选框都选中的情况下(checked:选中属性)

item[i].checked=true;//全选被选中时,勾选框被选中

}else {

item[i].checked=false;//全选被选中时,勾选框被清空

}

}

}

</script>

</head>

<body>

<div class="box">

<div>

<input type="checkbox" id="checkall" onclick="checkall()"/><label for="checkall">全选</label>

</div>

<input type="checkbox" name="item[]"/>选项1<br />

<input type="checkbox" name="item[]"/>选项2<br />

<input type="checkbox" name="item[]"/>选项3<br />

<input type="checkbox" name="item[]"/>选项4<br />

<input type="checkbox" name="item[]"/>选项5<br />

<input type="checkbox" name="item[]"/>选项6<br />

</div>

</body>

</html>

总结:这个项目使用了遍历以及数组的做法,但是无法理解为什么没有声明数组,而是直接使用item[]这个写法。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送