js jQuery解决checkbox数据回显问题

一、问题

　　在用复选框的时候，最常用的无非就是全选，全不选，数据回显等问题！

下面从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     
 2     

注意：引入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){
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 

　　js中数据的回显，通JQuery一样，在window.onload中添加

一、问题

　　在用复选框的时候，最常用的无非就是全选，全不选，数据回显等问题！要做的比较灵活！最近做项目的时候，就遇到这些问题，下面从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     
 2     

注意：引入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){
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 

　　js中数据的回显，通JQuery一样，在window.onload中添加