checkbox数据回显问题
2015-02-11 13:00
381 查看
一、问题
在用复选框的时候,最常用的无非就是全选,全不选,数据回显等问题!要做的比较灵活!最近做项目的时候,就遇到这些问题,下面从js和JQueyr两方面解决一下全选,全不选,数据回显的问题。
二、HTML页面
三、JQueyr实现全选,全不选,数据回显
注意:引入jquery的js
数据的回显说明一下,数据的回显,最长用到的地方是更新,当你更新的时候,你得把更新前的数据显示到页面中,所以,最好是在页面加载完成的时候,然后,调用window.onload方法,使数据回显到页面!一般我们存储多选框的值的时候,是以逗号隔开的字符串进行存储的,例如:100,1001,1002,1004等,然后,我们可能会把值放到一个隐藏域中,以供在js中调用!本例,我们把值放到一个隐藏域中,然后,在js中调用
四、JavaScript实现全选,全不选,数据回显
html页面的设计:
js中的设计:
js中数据的回显,通JQuery一样,在window.onload中添加
在用复选框的时候,最常用的无非就是全选,全不选,数据回显等问题!要做的比较灵活!最近做项目的时候,就遇到这些问题,下面从js和JQueyr两方面解决一下全选,全不选,数据回显的问题。
二、HTML页面
<input type="checkbox" id="checkAll"/>全选<br> <input type="checkbox" name="media" value="100" />新闻 <input type="checkbox" name="media" value="1001" />微信 <input type="checkbox" name="media" value="200" />论坛 <input type="checkbox" name="media" value="300" />问答 <input type="checkbox" name="media" value="1400" />博客 <input type="checkbox" name="media" value="400" />平媒 <br> <input type="submit" value="添加">
三、JQueyr实现全选,全不选,数据回显
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //点击全选的判断 $("#checkAll").click(function(){ //看全选 是否被选中 var ischeckAll =$(this).attr("checked"); var checkBoxAll = $("input[name='media']"); if(ischeckAll=="checked"){ //全部选中 $.each(checkBoxAll,function(i,checkbox){ $(checkbox).attr("checked",true); }); }else{ //全不选 $.each(checkBoxAll,function(i,checkbox){ $(checkbox).attr("checked",false); }); } }); //点击新闻,微信,论坛,问答,博客,平媒,等的判断 $("input[name='media']").click(function(){ //得到选中的长度 var array=$("input[name='media']:checked").length; //如果等于6,说明全部被选中,那么全选多选框也要被选中 //如果不等于6,说明全部都没选,那么全选的多选框也要被取消 if(array==6){ $("#checkAll").attr("checked",true); }else{ $("#checkAll").attr("checked",false); } }); }); </script>
注意:引入jquery的js
数据的回显说明一下,数据的回显,最长用到的地方是更新,当你更新的时候,你得把更新前的数据显示到页面中,所以,最好是在页面加载完成的时候,然后,调用window.onload方法,使数据回显到页面!一般我们存储多选框的值的时候,是以逗号隔开的字符串进行存储的,例如:100,1001,1002,1004等,然后,我们可能会把值放到一个隐藏域中,以供在js中调用!本例,我们把值放到一个隐藏域中,然后,在js中调用
<input type="checkbox" id="checkAll"/>全选<br> <input type="checkbox" name="media" value="100" />新闻 <input type="checkbox" name="media" value="1001" />微信 <input type="checkbox" name="media" value="200" />论坛 <input type="checkbox" name="media" value="300" />问答 <input type="checkbox" name="media" value="1400" />博客 <input type="checkbox" name="media" value="400" />平媒 <br> <input type="hidden" value="100,1001,200,1400" id="meidaHidden"> <input type="submit" value="添加">
$(function(){ //当页面加载完成的时候,自动调用该方法 window.onload=function(){ //获得所要回显的值,此处为:100,1001,200,1400 var checkeds = $("#meidaHidden").val(); //拆分为字符串数组 var checkArray =checkeds.split(","); //获得所有的复选框对象 var checkBoxAll = $("input[name='media']"); //获得所有复选框(新闻,微信,论坛,问答,博客,平媒)的value值,然后,用checkArray中的值和他们比较,如果有,则说明该复选框被选中 for(var i=0;i<checkArray.length;i++){ //获取所有复选框对象的value属性,然后,用checkArray[i]和他们匹配,如果有,则说明他应被选中 $.each(checkBoxAll,function(j,checkbox){ //获取复选框的value属性 var checkValue=$(checkbox).val(); if(checkArray[i]==checkValue){ $(checkbox).attr("checked",true); } }) } //全选多选框的回显 var array=$("input[name='media']:checked").length; //如果等于6,说明全部被选中,那么全选多选框也要被选中 //如果不等于6,说明全部都没选,那么全选的多选框也要被取消 if(array==6){ $("#checkAll").attr("checked",true); }else{ $("#checkAll").attr("checked",false); } }; });
四、JavaScript实现全选,全不选,数据回显
html页面的设计:
<input type="checkbox" id="all" onclick="checkAll(this)"/>全选<br> <input type="checkbox" id="check01" name="media" value="100" onclick="check(this)" />新闻 <input type="checkbox" id="check01" name="media" value="1001" onclick="check(this)" />微信 <input type="checkbox" id="check03" name="media" value="200" onclick="check(this)"/>论坛 <input type="checkbox" id="check04" name="media" value="300" onclick="check(this)"/>问答 <input type="checkbox" id="check05" name="media" value="1400" onclick="check(this)" />博客 <input type="checkbox" id="check06" name="media" value="400" onclick="check(this)"/>平媒 <br> <input type="hidden" value="100,1001,200,300,1400,400" id="meidaHidden"> <input type="submit" value="添加">
js中的设计:
<script type="text/javascript"> var number=0; //单击全选 function checkAll(checkBoxAll){ var elements = document.getElementsByName("media"); if(checkBoxAll.checked){ //全选 for(var i=0;i<elements.length;i++){ var ele = elements[i]; ele.checked=true; } number=6; }else{ //全不选 for(var i=0;i<elements.length;i++){ var ele = elements[i]; ele.checked=false; } number=0; } }; //点击新闻,微信,论坛,问答,博客,平媒,等的判断 function check(checkbox){ if(checkbox.checked){ number++; }else{ number--; } //如果长度为6,那么全选复选框选中,否则不选 var cBoxAll = document.getElementById("all"); if(number==6){ cBoxAll.checked=true; }else{ cBoxAll.checked=false; } }; </script>
js中数据的回显,通JQuery一样,在window.onload中添加
相关文章推荐
- checkbox数据回显问题
- <s:checkboxlist/>数据回显问题
- checkbox数据回显问题
- 求解--jsp中radio的性别信息的数据回显问题
- 关于ListView+CheckBox,Item超过一屏时数据乱序和不能全部选中的问题
- springmvc数据回显问题
- PullToRefreshListView 内嵌checkbox 数据丢失问题
- 关于将数据库中的bit型数据绑定到DataGrid中的CheckBox的Checked属性的问题。
- 基础向:recyclerView 内嵌 edittext checkbox 焦点获取、数据紊乱以及数据保存问题
- [Android算法] 解决ListView里嵌套CheckBox出现的数据刷新问题
- 关于 下拉框 数据 回显 的问题
- 用回调函数解决页面数据回显问题
- EXTJS4中使用CheckboxGroup回填数据问题
- 关于ListView+CheckBox,Item超过一屏时数据乱序和不能全部选中的问题
- 关于BaseAdapter,SimpleAdapter的数据显示错乱问题,选中状态错乱问题,Checkbox选中状态错乱问题总结
- ListView 数据错乱问题的解决(CheckBox)
- 嵌入checkbox数据丢失问题
- Extjs grid中的checkbox的选中获取数据是否为最新的问题
- 77ListView中item带有CheckBox复用缓存的问题(重点)(数据错乱)
- PullToRefreshListView 内嵌checkbox 数据丢失问题