js全选复选框

原创 2019-01-03 23:17:10 255
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js复选框全选</title><style type="text/css">     *{margin: 0;padding:0;}.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js复选框全选</title>

<style type="text/css">

     *{margin: 0;padding:0;}

.box1{width: 150px;height: 200px;border: 1px solid #333; border-radius: 5px;padding: 5px 10px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;margin: 150px;

}

.box2{border-bottom: 1px solid #333;padding-bottom: 5px;}

        .box1 input{margin:6px 15px;}

</style>

<script type="text/javascript">

function checkall() {

            var checkall,item;

            checkall=document.getElementById('checkall')//获取全选

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

for (var i=0; i<item.length;i++) {

if(checkall.checked){

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

}else{

item[i].checked=false;//否则,勾选框不被选中

}

}

}

</script>

</head>

<body>

<div>

<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>

js语句用于判断全选框是否被勾选,如果是,下方的勾选框全部勾选,反之不被勾选

批改老师:灭绝师太批改时间:2019-01-04 09:12:00
老师总结:作业完成的很好,全选案例在后面比较常用奥,要好好掌握!

发布手记

热门词条