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