前端checkbox全选反选

在前端经常遇到对复选框一键全选的操作，记录一下操作。

1.典型用法

function checkAllBox(){
	$("input[type='checkbox'][name='myCheck']").each(function(){
		if($(this).is(':checked')){
			$(this).attr("checked",false);
		}else{
			$(this).attr("checked",true);
		}
	});
}
//使用(checkbox需加属性name="myCheck")
<input type="button" id="btn" onclick="checkAllBox()"/>

这样的用法在IE可以正常使用，但是在chrome和firefox第三次点击失效。

2.jq选择器+原生js操作

function checkAllBox2(){
            var CheckBox = $('input[name = myCheck]');
            for(var i = 0; i < CheckBox.length; i++){
				    if(CheckBox[i].checked){
				        CheckBox[i].removeAttribute("checked");
				    }
				    else{
				        CheckBox[i].setAttribute("checked","checked");
				    }
		    }
        }

//使用(需要为checkbox添加属性name="myCheck")
<input type="button" id="btn2" onclick="checkAllBox2();" />

兼容IE,火狐，chrome。不过对手动选中的复选框，移除属性不起作用，不是很友好。

3.这是可选的方案，解决各个浏览器不兼容的问题

function checkAllBox2(){
            var CheckBox = $('input[name = myCheck]');
            for(var i = 0; i < CheckBox.length; i++){
				    if($(CheckBox[i]).prop("checked")){
				        $(CheckBox[i]).prop("checked",false);
				    }
				    else{
				        $(CheckBox[i]).prop("checked","checked");
				    }
		    }
        }

//使用(需要为checkbox添加属性name="myCheck")
<input type="button" id="btn2" onclick="checkAllBox2();" />

Prop函数 获取的是 BOOl 类型值。

 

对于未选中一个复选框的判断：

var CheckBox = $('input[name=myCheck]:checked');
// var CheckBox = $('input[type=checkbox]:checked');也行
if(CheckBox.length<1){
	 alert('请至少选择一个复选框');
	 return;
}
else{
	 alert('后续操作');
}