JS实现全选

Original 2019-03-13 10:29:22 231
abstract:<!doctype html><html><head><meta charset="utf-8"><title>JS-demo</title><style>.box{width:120px; height:250px;border:1px solid #ccc; border-radius:5p

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS-demo</title>

<style>

.box{width:120px; height:250px;border:1px solid #ccc; border-radius:5px; padding:5px 10px; margin:20px auto;}

.box div{border-bottom:1px solid #ccc; padding-bottom:10px;}

.box input{margin:8px;}

</style>

</head>

<body>

<div class="box">

<div><input type="checkbox" id="checkall" onClick="checkAll()"><label for="checkall">全选</label></div>

<input type="checkbox" name="item[]">选项一<br>

<input type="checkbox" name="item[]">选项二<br>

<input type="checkbox" name="item[]">选项三<br>

<input type="checkbox" name="item[]">选项四<br>

<input type="checkbox" name="item[]">选项五<br>

<input type="checkbox" name="item[]">选项六<br>

</div>

</body>

<script type="application/javascript">

function checkAll(){

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>

</html>

//练习时,变量名checkall,书写错误,导致无法实现功能,看了好半天才发现。。。。。拼写不规范,查找两行泪

Correcting teacher:韦小宝Correction time:2019-03-14 09:08:35
Teacher's summary:实现了全选还要可以获取到全选的信息才能呢 这个在以后的开发都会使用到的

Release Notes

Popular Entries