一、問題

　　在用復選框的時候，最常用的無非就是全選，全不選，數據回顯等問題！要做的比較靈活！最近做項目的時候，就遇到這些問題，下面從js和JQueyr兩方面解決一下全選，全不選，數據回顯的問題。

二、HTML頁面

1     <input type="checkbox" id="checkAll"/>全選<br>2     <input type="checkbox" name="media" value="100"  />新聞3     <input type="checkbox" name="media" value="1001"  />微信 4     <input type="checkbox" name="media" value="200"  />論壇5     <input type="checkbox" name="media" value="300"  />問答6     <input type="checkbox" name="media" value="1400"  />博客7     <input type="checkbox" name="media" value="400"  />平媒8     <br>9     <input type="submit" value="添加">

三、JQueyr實現全選，全不選，數據回顯

 1     <script type="text/javascript" src="js/jquery.min.js"></script> 2     <script type="text/Javascript"> 3         $(function(){ 4             //點擊全選的判斷 5             $("#checkAll").click(function(){ 6                 //看全選 是否被選中 7                 var ischeckAll =$(this).attr("checked"); 8                 var checkBoxAll = $("input[name='media']"); 9                 if(ischeckAll=="checked"){10                     //全部選中11                     $.each(checkBoxAll,function(i,checkbox){12                         $(checkbox).attr("checked",true);13                     });    14                 }else{15                     //全不選16                     $.each(checkBoxAll,function(i,checkbox){17                         $(checkbox).attr("checked",false);18                     });    19                 }20                 21             });22             23             //點擊新聞,微信,論壇，問答，博客，平媒，等的判斷24             $("input[name='media']").click(function(){25                 //得到選中的長度26                 var array=$("input[name='media']:checked").length;27                 //如果等于6，說明全部被選中，那么全選多選框也要被選中28                 //如果不等于6，說明全部都沒選，那么全選的多選框也要被取消29                 if(array==6){30                     $("#checkAll").attr("checked",true);31                 }else{32                     $("#checkAll").attr("checked",false);33                 }34             });35         });36     </script>

注意：引入jquery的js

數據的回顯說明一下，數據的回顯，最長用到的地方是更新，當你更新的時候，你得把更新前的數據顯示到頁面中，所以，最好是在頁面加載完成的時候，然后，調用window.onload方法，使數據回顯到頁面！一般我們存儲多選框的值的時候，是以逗號隔開的字符串進行存儲的，例如：100,1001,1002,1004等，然后，我們可能會把值放到一個隱藏域中，以供在js中調用！本例，我們把值放到一個隱藏域中，然后，在js中調用

 1         <input type="checkbox" id="checkAll"/>全選<br> 2         <input type="checkbox" name="media" value="100"  />新聞 3         <input type="checkbox" name="media" value="1001"  />微信  4         <input type="checkbox" name="media" value="200"  />論壇 5         <input type="checkbox" name="media" value="300"  />問答 6         <input type="checkbox" name="media" value="1400"  />博客 7         <input type="checkbox" name="media" value="400"  />平媒 8         <br> 9         <input type="hidden" value="100,1001,200,1400" id="meidaHidden">10         <input type="submit" value="添加">

 1 $(function(){ 2          3             //當頁面加載完成的時候，自動調用該方法 4             window.onload=function(){ 5                 //獲得所要回顯的值，此處為：100,1001,200,1400 6                 var checkeds = $("#meidaHidden").val(); 7                 //拆分為字符串數組 8                 var checkArray =checkeds.split(","); 9                 //獲得所有的復選框對象10                 var checkBoxAll = $("input[name='media']");11                 //獲得所有復選框（新聞,微信,論壇，問答，博客，平媒）的value值，然后，用checkArray中的值和他們比較，如果有，則說明該復選框被選中12                 for(var i=0;i<checkArray.length;i++){13                     //獲取所有復選框對象的value屬性，然后，用checkArray[i]和他們匹配，如果有，則說明他應被選中14                     $.each(checkBoxAll,function(j,checkbox){15                         //獲取復選框的value屬性16                         var checkValue=$(checkbox).val();17                         if(checkArray[i]==checkValue){18                             $(checkbox).attr("checked",true);19                         }20                     })21                 }22                 23                 //全選多選框的回顯24                 var array=$("input[name='media']:checked").length;25                 //如果等于6，說明全部被選中，那么全選多選框也要被選中26                 //如果不等于6，說明全部都沒選，那么全選的多選框也要被取消27                 if(array==6){28                     $("#checkAll").attr("checked",true);29                 }else{30                     $("#checkAll").attr("checked",false);31                 }32                 33             };34 });

四、JavaScript實現全選，全不選，數據回顯

　　html頁面的設計：

 1 <input type="checkbox" id="all" onclick="checkAll(this)"/>全選<br> 2 <input type="checkbox" id="check01" name="media" value="100"  onclick="check(this)" />新聞 3 <input type="checkbox" id="check01" name="media" value="1001" onclick="check(this)" />微信  4 <input type="checkbox" id="check03" name="media" value="200"  onclick="check(this)"/>論壇 5 <input type="checkbox" id="check04" name="media" value="300"  onclick="check(this)"/>問答 6 <input type="checkbox" id="check05" name="media" value="1400" onclick="check(this)" />博客 7 <input type="checkbox" id="check06" name="media" value="400"  onclick="check(this)"/>平媒 8 <br> 9 <input type="hidden" value="100,1001,200,300,1400,400" id="meidaHidden">10 <input type="submit" value="添加">

　　js中的設計：

 1 <script type="text/javascript"> 2         var number=0; 3         //單擊全選 4         function checkAll(checkBoxAll){ 5             var elements = document.getElementsByName("media"); 6             if(checkBoxAll.checked){ 7                 //全選 8                 for(var i=0;i<elements.length;i++){ 9                     var ele = elements[i];10                     ele.checked=true;11                 }12                 number=6;13             }else{14                 //全不選15                 for(var i=0;i<elements.length;i++){16                     var ele = elements[i];17                     ele.checked=false;18                 }19                 number=0;20             }21         };22         23         //點擊新聞,微信,論壇，問答，博客，平媒，等的判斷24         function check(checkbox){25             if(checkbox.checked){26                 number++;27             }else{28                 number--;29             }30             31             //如果長度為6，那么全選復選框選中，否則不選32             var cBoxAll = document.getElementById("all");33             if(number==6){34                 cBoxAll.checked=true;35             }else{36                 cBoxAll.checked=false;37             }38         };39 </script>

　　js中數據的回顯，通JQuery一樣，在window.onload中添加