摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js全選</title><style type="text/css">*{padding: 0;margin: 0;}.box{width: 100px;borde
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js全選</title>
<style type="text/css">
*{padding: 0;
margin: 0;
}
.box{
width: 100px;
border:1px solid #ccc;
border-radius: 4px;
margin:50px auto;
padding:10px;
}
.check{
height: 32px;
line-height: 32px;
border-bottom: 1px solid #ccc
}
input{
margin:10px 0;
}
</style>
</head>
<body>
<div>
<div >
<input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全選</label>
</div>
<input type="checkbox" name="item[]">菜單1</input><br>
<input type="checkbox" name="item[]">菜單2</input><br>
<input type="checkbox" name="item[]">菜單3</input><br>
<input type="checkbox" name="item[]">菜單4</input><br>
<input type="checkbox" name="item[]">菜單5</input><br>
<input type="checkbox" name="item[]">菜單6</input> <br>
</div>
<script type="text/javascript">
function checkall(){
var ck,item;
ck =window.document.getElementById('checkall');
item = window.document.getElementsByName('item[]');
for (var i =0; i < item.length ; i++) {
if(ck.checked){
item[i].checked = true;
}else{
item[i].checked = false;
}
}
}
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2019-03-19 15:50:05
老師總結(jié)：這是復制的教學代碼吧, 想一下這個全選功能會用在哪, 自己寫一下試試看