今天用jQuery 做一个全选,结果尴尬了,脑子短路了不知道怎么判断是否选中;
写给以后的自己。
下面是一个完整的全选/反选的例子:
<input type="checkbox" id="wholeSelect" value=""><!--全选按钮-->
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<input type="checkbox" name="checkbox" value="3">
<input type="checkbox" name="checkbox" value="4">
方法一:
//推荐使用
var wholeSelect=$('#wholeSelect');
wholeSelect.change(function (e) {
var _this=$(this);
//判断全选按钮是否选中
if (_this.is(':checked')){//选中时的操作
$('input[name="checkbox"]').prop("checked",true);
}else{//未选中时的操作
$('input[name="checkbox"]').prop('checked',false);
}
});
方法二:
//不推荐使用
var wholeSelect=$('#wholeSelect');
wholeSelect.change(function (e) {
var _this=$(this);
//判断全选按钮是否选中
//注意:这种方式有个问题,如果你是动态选中且方法是用".attr('checked',true)",这时候下面的方法将不准确。
if (_this.attr(':checked')){
//选中时的操作
}else{
//未选中时的操作
}
});
动态让checkbox选中 / 反选
//方式一
$('input[name="checkbox"]').prop("checked",true);//选中 推荐使用prop的方式
$('input[name="checkbox"]').prop('checked',false);//取消选中
//方式二
$('input[name="checkbox"]').attr("checked",true);//选中 注意:用attr方式只能选中一次,第二次是无效的
$('input[name="checkbox"]').attr('checked',false);//取消选中