一、問題
在用複選框的時候，最常用的無非就是全選，全不選，資料回顯等問題！要做的比較靈活！最近做項目的時候，就遇到這些問題，下面從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.οnlοad=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中添加
轉載于:https://www.cnblogs.com/robert-blue/p/4285761.html
![Java String.format方法的簡單使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)