全选,全不选

Original 2019-04-01 10:42:39 224
abstract:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 200px; height: 150px; border: 1px solid #000;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.box{

width: 200px;

height: 150px;

border: 1px solid #000;

padding-bottom: 8px;

margin: 10px auto;

}

.box div{

border-bottom: 1px solid #ccc;

margin-bottom: 5px;

}

</style>

</head>

<body>

<div class="box">

<div>

<label ><input id="aa" type="checkbox" /> 全选</label>

</div>

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

<input type="checkbox" name="item" />选项6<br />


</div>

<script>

var lable=document.getElementById('aa');

var items=document.getElementsByName('item');

lable.onclick=function(){

for(var i=0;i<items.length;i++){

if(aa.checked)

{

items[i].checked=true

}

else{

items[i].checked=false

}

}

}




</script>

</body>

</html>



Correcting teacher:西门大官人Correction time:2019-04-02 09:33:08
Teacher's summary:命名注意一下,尽量避免出现aa,bb等无意义的单词或字母

Release Notes

Popular Entries