先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码。
HTML代码:
301_10@
jquery代码:
Box").attr("checked",this.checked);
});
$("[name=items]:checkBox").click(function(){
var flag=true;
$("[name=items]:checkBox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})
//全选
$("#selectAll").click(function(){
$("[name=items]:checkBox").each(function(){
$(this).attr("checked",true);
});
});
//全不选
$("#unSelect").click(function(){
$("[name=items]:checkBox").each(function(){
$(this).attr("checked",false);
});
});
//反选
$("#reverse").click(function(){
$("[name=items]:checkBox").each(function(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$("#btn").click(function(){
var str="你选中的是:\r\n";
$("[name=items]:checkBox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
注:由于jquery版本的变更,新版本出现只能点击一次,老一点的版本是可以的,新的版本不可以使用attr来设置选中状态了,第一种解决方法是可以使用js原生的方法this.checked=true/false;
第二种解决方法是把attr换成prop。
以上所述是小编给大家介绍的jQuery对checkBox 复选框的全选全不选反选的操作。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。