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