JavaScrip-—t全选

原创2018-12-16 18:26:42112
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JavaScrip-—t全选</tit

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>JavaScrip-—t全选</title>

<style type="text/css">

.box{width: 120px;height: 250px;border: 1px solid #ccc;border-radius: 5px;padding: 5px 10px;margin: 20px auto;}

.box div{border-bottom: 1px solid #ccc;padding-bottom: 10px;margin-bottom: 8px;}

.box input{margin: 8px;}

</style>

<script type="text/javascript">

function checKAll(){

var checkall,item;

checkall=document.getElementById("checkall")

item=document.getElementsById("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 class="box">

<div>

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

</div>

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

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

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

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

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

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

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2018-12-16 19:45:56
老师总结:全选功能, 重点有二个, 复选框的name属性必须全部一样, 并且 要写成数组的形式

发布手记

热门词条