全选的实现与总结

Original 2018-12-23 11:50:12 170
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选</title><style type="text/css">.box{width: 120px;height: 240px;border: 1px solid

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全选</title>

<style type="text/css">

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

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

.box input{margin-top: 10px;}

</style>

<script type="text/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>

</head>

<body>

<div >

<div>

<input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全选</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>

</body>

</html>

总结:for循环与if嵌套使用是难点,再写一遍

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;

}

}

}

全选的js写法好像是固定的,以前见过,以后直接可以拷贝,在onclick事件直接用。

测试checkall.checked与checkall.checked=true两者效果不一样,后者勾选选上后去不掉,长见识。

Release Notes

Popular Entries