checkbox数据回显问题
2016-03-14 11:15
447 查看
一、问题
在用复选框的时候,最常用的无非就是全选,全不选,数据回显等问题!要做的比较灵活!最近做项目的时候,就遇到这些问题,下面从js和JQueyr两方面解决一下全选,全不选,数据回显的问题。
二、HTML页面
三、JQueyr实现全选,全不选,数据回显
注意:引入jquery的js
数据的回显说明一下,数据的回显,最长用到的地方是更新,当你更新的时候,你得把更新前的数据显示到页面中,所以,最好是在页面加载完成的时候,然后,调用window.onload方法,使数据回显到页面!一般我们存储多选框的值的时候,是以逗号隔开的字符串进行存储的,例如:100,1001,1002,1004等,然后,我们可能会把值放到一个隐藏域中,以供在js中调用!本例,我们把值放到一个隐藏域中,然后,在js中调用
四、JavaScript实现全选,全不选,数据回显
html页面的设计:
js中的设计:
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 <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中添加
相关文章推荐
- jsp中setAttribute与getAttribute方法使用介绍
- java抽象类与接口的区别(谈谈自己的理解)
- 项目范围应该如何管理?什么是项目范围蔓延?与渐进明细有什么区别?
- ffmpeg常见命令
- WIFI 的SSID/ESSID/BSSID区别
- 有return的情况下try catch finally的执行顺序
- ViewPager 调用notifyDataSetChanged()不刷新内容的问题
- 信息系统项目管理01
- android布局属性详解
- unity shader之岩浆瀑布
- android自定义属性
- 1、利用jdbc,连接mysql数据库
- 精灵帧缓存SpriteFrameCache-Cocos2dx-lua
- CSS光标cursor
- 【云计算】OpenStack qcow2镜像如何转化为Docker镜像?
- Android中如何获取视频文件的截图、缩略图
- nrf51822开发指导之芯片版本的区分方法
- sourcetree帮助文档
- adb命令大全
- office2010激活密钥