正文
checkbox数据回显问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、问题
在用复选框的时候，最常用的无非就是全选，全不选，数据回显等问题！要做的比较灵活！最近做项目的时候，就遇到这些问题，下面从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中添加
