js控制checkbox全选和取消全选

原创 2019-01-29 08:46:59 306
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选-案例</title><style type="text/css">#box{border-radius: 5px; border:1px solid; bor

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全选-案例</title>

<style type="text/css">

#box{border-radius: 5px; border:1px solid; border-color: #ccc; margin: 20px auto;padding: 10px; width: 60px;}

</style>

<script type="text/javascript">

function chk(){

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 id="box">

<input type="checkbox" id="checkAll" onclick="chk()">全选<br>

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

</div>

</body>

</html>

批改老师:韦小宝批改时间:2019-01-29 09:15:46
老师总结:写的很不错 这个全选还是蛮基础简单的 课后没事多练习练习吧

发布手记

热门词条