js复选框实现全选、全不选、反选

复选框为checkbox对象

通过input就可以将一个简单的复选框呈现在页面上

<input type="checkbox" />

要实现的大概就是这样一个页面

思路

全选

因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选

同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

最上面的全选/全不选功能

通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false

注意

为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的

源代码如下

 <!DOCTYPE html>
 <html>

 <head>
     <meta charset="utf-8" />
     <title>复选框</title>

     <style type="text/css">

     </style>
 </head>

 <body>
     <input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选
     <br />
     <input type="checkbox" name="love" />篮球
     <br />
     <input type="checkbox" name="love" />排球
     <br />
     <input type="checkbox" name="love" />羽毛球
     <br />
     <input type="checkbox" name="love" />乒乓球
     <br />
     <input type="button" value="全选" onclick="setAll()" />
     <input type="button" value="全不选" onclick="setNo()" />
     <input type="button" value="反选" onclick="setOthers()" />

     <script type="text/javascript">
         //全选函数
         function setAll() {
             var loves = document.getElementsByName("love");
             for (var i = 0; i < loves.length; i++) {
                 loves[i].checked = true;
             }
         }

         //全不选函数
         function setNo() {
             var loves = document.getElementsByName("love");
             for (var i = 0; i < loves.length; i++) {
                 loves[i].checked = false;
             }
         }

         //反选
         function setOthers() {
             var loves = document.getElementsByName("love");
             for (var i = 0; i < loves.length; i++) {
                 if (loves[i].checked == false)
                     loves[i].checked = true;
                 else
                     loves[i].checked = false;
             }
         }

         //全选/全不选操作
         function setAllNo(){
             var box = document.getElementById("boxid");
             var loves = document.getElementsByName("love");
             if(box.checked == false){
                 for (var i = 0; i < loves.length; i++) {
                     loves[i].checked = false;
                 }
             }else{
                 for (var i = 0; i < loves.length; i++) {
                     loves[i].checked = true;
                     }
             }
         }
     </script>

 </body>

 </html>

例子2

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>全选，反选按钮</title>
         <script type="text/javascript">
             window.onload=function(){
                 /*
                  *1 #checkedAllBtn
                  * 2 #checkedBoBtn
                  * 3 #checkedRevBtn
                  * 4 #sendBtn
                  * 5 #checkedAllBox
                  * 6 #items
                  * */

                 var checkedAllBtn = document.getElementById("checkedAllBtn");
                 //checkedAllBox
                 var checkedAllBox = document.getElementById("checkedAllBox");

                 checkedAllBtn.onclick = function(){

                     //获取四个多选框items
                     var items = document.getElementsByName('items');

                     //遍历items
                     for(var i=0;i<items.length;i++)
                     {
                         //设置四个多选框变成选中状态
                         //通过多选框的checked属性可获取或设置选中状态
                         items[i].checked = true;

                     }

                         //将checkedAllBox设置为选中状态
                 checkedAllBox.checked = true;

                 };

                 //全不选按钮
                 var checkedNoBtn = document.getElementById("checkedNoBtn");

                 checkedNoBtn.onclick = function(){
                     //获取四个多选框items
                     var items = document.getElementsByName('items');

                     //遍历items
                     for(var i=0;i<items.length;i++)
                     {
                         //设置四个多选框变成选中状态
                         //通过多选框的checked属性可获取或设置选中状态
                         items[i].checked = false;

                     }

                         //将checkedAllBox设置为选中状态
                 checkedAllBox.checked = false;

                 };

                 //反选  也要判断是否都需要全部选中
                 var checkedRevBtn = document.getElementById("checkedRevBtn");

                 checkedRevBtn.onclick = function(){
                     //获取四个多选框items
                     var items = document.getElementsByName('items');

                             checkedAllBox.checked = true;

                     //遍历items
                     for(var i=0;i<items.length;i++)
                     {
                         //设置四个多选框变成选中状态
                         //通过多选框的checked属性可获取或设置选中状态
                         items[i].checked = !items[i].checked;

                         if(!items[i].checked){
                         //一旦进入判断，则证明不是全选状态
                         //将checkedAllBox设置为没选中状态
                         checkedAllBox.checked = false;

                     }

                     }

                 };

                 //提交按钮
                 var sendBtn = document.getElementById("sendBtn");
                 sendBtn.onclick = function(){
                         var items = document.getElementsByName('items');
                     //遍历 items
                     for(var i=0; i<items.length;i++)
                     {
                         //判断多选框是否选中
                         if(items[i].checked){
                             alert(items[i].value);
                         }
                     }
                 };

                 checkedAllBox.onclick = function(){
                     var items = document.getElementsByName('items');

                     //遍历items
                     for(var i=0;i<items.length;i++)
                     {
                         //设置四个多选框变成选中状态
                         items[i].checked = this.checked;

                     }

                 };

                 //items

                 //如果四个多选框全都选中，则checkedAllBox也应该选中
                 //如果四个多选框都没选中，则checkedAllBox也应该没选中
                     var items = document.getElementsByName('items');
                 //为四个多选框分别绑定点击响应函数
         for(var i=0 ; i<items.length ; i++){
             items[i].onclick = function(){

                 //将checkedAllBox设置为选中状态
                 checkedAllBox.checked = true;

                 for(var j=0 ; j<items.length ; j++){
                     //判断四个多选框是否全选
                     //只要有一个没选中则就不是全选
                     if(!items[j].checked){
                         //一旦进入判断，则证明不是全选状态
                         //将checkedAllBox设置为没选中状态
                         checkedAllBox.checked = false;
                         //一旦进入判断，则已经得出结果，不用再继续执行循环
                         break;
                     }

                 }

             };
         }

             }

         </script>
     </head>
     <body>

         <form method="post" action="">
         你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 

         <br />
         <input type="checkbox" name="items" value="足球" />足球
         <input type="checkbox" name="items" value="篮球" />篮球
         <input type="checkbox" name="items" value="羽毛球" />羽毛球
         <input type="checkbox" name="items" value="乒乓球" />乒乓球
         <br />
         <input type="button" id="checkedAllBtn" value="全　选" />
         <input type="button" id="checkedNoBtn" value="全不选" />
         <input type="button" id="checkedRevBtn" value="反　选" />
         <input type="button" id="sendBtn" value="提　交" />
     </form>
     </body>
 </html>