js控制checkbox全选和取消全选

Original 2019-01-29 08:46:59 229
abstract:<!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>

Correcting teacher:韦小宝Correction time:2019-01-29 09:15:46
Teacher's summary:写的很不错 这个全选还是蛮基础简单的 课后没事多练习练习吧

Release Notes

Popular Entries