本文记录的是复选框的应用,即复选框的全选,反选,全不选等操作,js代码如下:
$(function(){
$("#CheckedAll").click(function(){//全选或者全部选框的点击事件
$("input[name=items]").attr("checked",this.checked);//事件主体的选中状态跟所有的复选框的选中状态是一致的,
}); //只要所有复选框全部被选中,事件主题也被选中,如果有一个没有被选中,则不被选中。
$("[name=items]:checkbox").click(function(){//任意复选框的点击事件
var flag = true;//定义一个变量,用以判断复选框是否全部被选中
$("[name=items]:checkbox").each(function(){//只要存在没有被选中的复选框,就让flag=false
if(!this.checked){
flag = false;
}
});
$("#CheckedAll").attr("checked",flag);
});
//上述方法相对比较繁琐,我们可以考虑用复选框的总个数是否与被选中的复选框总个数相等来联动全选/全部选
$("[name=items]:checkbox").click(function(){
var tmp=$("[name=items]checkbox");
$("#CheckedAll").attr("checked",tmp.length==tmp.filter(":checked").length);//用filter过滤被选中的复选框
});
$("#checkedNo").click(function(){//全不选按钮
$("input[name=items]").attr("checked",false);
});
$("#checkedRev").click(function(){//反选按钮
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
$("#send").click(function(){
var str = "";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val() + "\n";
});
alert(str);
});
})