标签：
javascript实现复选框全选和取消代码分析:
复选框是常用的元素之一，而点击实现全选和取消全选又是最为常用的功能，特别是在批量操作管理中，非常的方便，下面就通过代码实例介绍一下如何实现此效果，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>复选框的全选和取消代码-蚂蚁部落</title> <script type="text/javascript"> window.onload=function(){ var ckall=document.getElementById("control"); var cks=document.getElementsByName("ck"); var title=document.getElementById("title"); ckall.onclick=function(){ for (var i=0;i<cks.length;i++){ if(ckall.checked==true){ cks[i].checked=true; title.innerHTML="取消"; } else{ cks[i].checked=false; title.innerHTML="全选"; } } } } </script> </head> <body> <form id="form1" runat="server"> <input type="checkbox" id="control" /><span id="title">全选</span> <div id="box"> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> </div> </form> </body> </html>
以上代码实现了我们的要求，当点击顶部复选框的时候能够全选和取消全选所有的复选框，下面介绍一下实现过程:
一.实现原理:
原理比较简单，当点击顶部复选框的时候，此复选框注册的事件处理函数可以判断此时复选框是否被选中，如果被选中的话，通过for循环遍历所有的复选框，然后将每一个复选框设置为选中，并且将span中的内容设置为取消，反之同样的道理。
二.相关阅读:
1.getElementsByName()函数可以参阅getElementsByName()方法的用法一章节。
2.checked属性可以参阅javascript的checkbox.checked属性一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10761
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/softwhy/p/5150045.html
