• 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     <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中添加

       

  • 相关阅读:
    python_控制台输出带颜色的文字方法
    模拟数据库作业
    js笔记
    CSS 笔记
    html 笔记
    必备技能-Git 使用规范流程
    python 闭包
    30个python编程技巧!
    python 面向对象
    python 线程
  • 原文地址:https://www.cnblogs.com/robert-blue/p/4285761.html
Copyright © 2020-2023  润新知