JQ实现全选、反选、全不选

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ZF2015908732/article/details/102604500

<script type="text/javascript">
$(function() {
	var i=false;
	//全选操作
	$("#all").on("click",function(){
		if(i==false){
			//选中方式不同，详细的可以参考jq手册
			$("input[name='id']").prop("checked",true);
			i=true;
		}else{
			$("input[name='id']").prop("checked",false);
			i=false;
		}
	});
	
	//反选操作
	$("#Rev").on("click",function(){
		$("[type=checkbox]:checkbox").each(function() {
	        this.checked = !this.checked;
	        i=!i;
	    });
	});

	//全不选操作
	$("#allNot").on("click",function(){
			$("input[name='id']").prop("checked",false);
			i=false;
	});
	

});
</script>

这里将true和false赋给i。如果直接用true和false的话，点击多选按钮，然后再点击反选/全不选后，要再点击两次全选按钮才有效（解决的办法没找到），所以就用i来代替true和false，每次点击后，都清空一下状态。

<td colspan="*">
	批量操作：&nbsp;&nbsp; 
		&nbsp;&nbsp;&nbsp;&nbsp; 
		<input type="button" value="全选" id="all" />
		&nbsp;&nbsp;&nbsp;&nbsp; 
		<input type="button" value="反选" id="Rev" />
		&nbsp;&nbsp;&nbsp;&nbsp; 
		<input type="button" value="全不选" id="allNot" />
</td>
<!-- 下面这个是多选框的写法 -->
<input type="checkbox" name="id">