摘要:<!DOCTYPE html><html><head> <title>全選</title> <style type="text/css"> .box{width:120px;heiht:250px;border:1px solid #000;border-radius: 5px;padding:5px 10
<!DOCTYPE html>
<html>
<head>
<title>全選</title>
<style type="text/css">
.box{width:120px;heiht:250px;border:1px solid #000;border-radius: 5px;padding:5px 10px;margin:20px auto;}
.box div{border-bottom:1px solid #000;padding-bottom:10px;margin-bottom:8px;}
.box input{margin:8px;}
</style>
<script type="text/javascript">
function checkAll(){
var checkall,item,i=0;
checkall=document.getElementById('checkall')//獲取全選
item=document.getElementsByName("item[]")//獲取下面的勾選框
//alert(111)
//var s=item[].length
while(i<item.length){
//alert(111)
//document.write(i)
if(checkall.checked){
item[i].checked=true;//當(dāng)全選被選中,下邊勾選框被選中
}else{
item[i].checked=false;
}
i++;
}
}
</script>
</head>
<body>
<div class="box">
<div><input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全選</label></div>
<input type="checkbox" name="item[]">選項(xiàng)1<br/>
<input type="checkbox" name="item[]">選項(xiàng)2<br/>
<input type="checkbox" name="item[]">選項(xiàng)3<br/>
<input type="checkbox" name="item[]">選項(xiàng)4<br/>
<input type="checkbox" name="item[]">選項(xiàng)5<br/>
<input type="checkbox" name="item[]">選項(xiàng)6<br/>
</div>
</body>
</html>
剛開(kāi)始把i++放錯(cuò)地方了結(jié)果造成下邊的選礦少了一個(gè),第二個(gè)少了一個(gè)括號(hào),出現(xiàn)錯(cuò)誤,習(xí)慣寫(xiě)東西之前先alert()一下看看是否調(diào)用成功,要是再多幾個(gè)案例就好了
批改老師:滅絕師太批改時(shí)間:2019-02-27 09:14:30
老師總結(jié):需要案例練習(xí)的話可以看下選修課中的前端案例大全,