checkbox数据回显问题

偏执的太偏执、 2022-08-02 01:18 262阅读 0赞

*原文*  [ http://www.cnblogs.com/robert-blue/p/4285761.html][http_www.cnblogs.com_robert-blue_p_4285761.html]

主题 [ JavaScript ][JavaScript]

一、问题

在用复选框的时候，最常用的无非就是 全选，全不选，数据回显 等问题！要做的比较灵活！最近做项目的时候，就遇到这些问题，下面从js和JQueyr两方面解决一下全选，全不选，数据回显的问题。

二、HTML页面

1     <input type="checkbox"/>全选<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中添加

[http_www.cnblogs.com_robert-blue_p_4285761.html]: http://www.cnblogs.com/robert-blue/p/4285761.html?utm_source=tuicool
[JavaScript]: http://www.tuicool.com/topics/11060004