全选/全不选/反选/通过JQuary_全选翻通-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44071260/article/details/86551365

先来讲讲思路:
1.做表格,导入jq文件就不赘述了
2.首先,全选全不选我们肯定是一个绑定在主控制按钮(id=“all”)的事件,我们要先获得主控制按钮这个对象,其次给它绑定click点击事件,在绑定点击事件方法中获得所有除了索引为0的复选框对象,判断对象的是否被选中的状态,并将属性赋值(true|ffalse)给所有子控制按钮就可以通过主控制按钮来完成全选,全不选
3.是完成反选操作,反选:1)我们要得到反选按钮对象,并且添加事件,遍历复选框,获取复选框对象的选中状态,取反(如果checked,(“checked,false”)).
这只是一个最基本的实现反选全选全不选的方法,如有指正,欢迎来扰,希望大家身体健康,事业顺利

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选,全不选,反选</title>
			<style type="text/css">
			
			tr {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table class="tb" align="center" border="1px" width="70%" style="border-collapse: collapse;">
			<tr>
				<th>
					<input type="checkbox" id="all" />
					<button id="checkNot">反选</button>
				</th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck" /></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck" /></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck" /></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck" /></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		
		/*全选和全不选*/
		// 给第一个复选框对象绑定点击事件
		$("#all").click(function(){
			$(":checkbox:gt(0)").prop("checked",$("#all").prop("checked"));
		});
		
		/*反选*/
		// 给按钮绑定点击事件
		$("#checkNot").click(function(){
			// 遍历下面四个复选框
			$(":checkbox:gt(0)").each(function(index,element){
				// 遍历出来的对象都是dom对象，如果想用jquery的方法，必须先转换成jquery对象
				/*if (this.checked) {
					
				}*/
				// 如果被选择，则设置为不选中；否则设置为选中
				if ($(this).prop("checked")) {
					$(this).prop("checked",false);
				} else {
					$(this).prop("checked",true);
				}
			});
		});
		
	</script>
</html>

效果图如下:

在这里插入图片描述
ps:因为懒得录屏软件,效果自己看看就好