用javascript实现全选/反选组件
2014-08-23 21:17 勤劳的插秧哥 阅读(288) 评论(0) 编辑 收藏 举报以下是本人制作的全选/反选 组件,供广大同行参考、指正:
效果如图:
在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可。反选也较为简单,也是用for循环遍历一遍,把复选框的值设为当前状态的反向: obox[i].checked=!obox[i].checked; 。难点在于在全选状态下取消一个复选框,要自动识别为没有全选,随即更新全选状态为false。
<html> <head> <meta charset="utf-8"> <style> body,div{margin: 0;padding: 0} body{font: 16px/1.5 Tahoma;color: #fff;font-weight:bold;text-align: center;line-height: 28px} #box{margin-top:100px;} #box1{height: 320;width: 100px;margin: 0 auto;background: #9c3;border:4px solid #439C3A;border-radius: 6px;} #box2{width: 100px;height: 300px;margin: 0 auto;} .checkbox{width: 16px;height: 16px;} label{font: 20px/1.5 Tahoma;font-weight: bold;line-height: 28px} #all{width: 20px;height: 20px;} button{background: #9c3;color: #fff;height: 28px;width: 60px;font:18px/1.5 Tahoma;line-height: 15px;border: 2px solid #439C3A; border-radius: 4px;font-weight:bold;cursor: pointer;} </style> </head> <body> <div id="box"> <div id="box1"> <label><b>全选</b></label><input type="checkbox" id="all"><br><hr> <div id="box2"> 事项1<input type="checkbox" class="checkbox"><br> 事项2<input type="checkbox" class="checkbox"><br> 事项3<input type="checkbox" class="checkbox"><br> 事项4<input type="checkbox" class="checkbox"><br> 事项5<input type="checkbox" class="checkbox"><br> 事项6<input type="checkbox" class="checkbox"><br> 事项7<input type="checkbox" class="checkbox"><br> 事项8<input type="checkbox" class="checkbox"><br> <hr> <button id="but1">反 选</button> </div> </div> </div> </body> <script type="text/javascript"> var oall=document.getElementById("all"); //获取“全选/取消”复选框 var obox=document.getElementById("box2").getElementsByTagName("input"); //获取各项复选框 var olabel=document.getElementsByTagName("label")[0]; //获取“label”用来更新显示 全选/取消 var obut=document.getElementById("but1"); //获取反选按钮<span style="font-family: Arial, Helvetica, sans-serif;"> </span>
obut.onclick=function() //反选 { var count=0; for(var i=0;i<obox.length;i++) { obox[i].checked=!obox[i].checked; if(obox[i].checked) { count++; } } oall.checked=count==obox.length?true:false; olabel.innerHTML=oall.checked ? "取消":"全选"; };
</pre><pre name="code" class="html">
oall.onclick=function(){ //全选 for(var i=0;i<obox.length;i++){ obox[i].checked=this.checked; } olabel.innerHTML=oall.checked ? "取消":"全选"; };
</pre><pre name="code" class="html">
var n; for(var i=0;i<obox.length;i++) //更新“全选/取消” { obox[i].onclick=function(){ n=0; for(var j=0;j<obox.length;j++) { if(obox[j].checked) { n++; } } oall.checked=n==obox.length?true:false; olabel.innerHTML=oall.checked ? "取消":"全选"; }; } </script> </html>