JQ表格的全选和全不选

最新推荐文章于 2022-02-15 14:20:56 发布

云飞扬°

最新推荐文章于 2022-02-15 14:20:56 发布

阅读量593

点赞数

分类专栏： JQuery 文章标签： JQ表格的全选和全不选

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90320106

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQ表格的全选和全不选

使用元素选择器：选择器[属性名称=‘属性值’]
					
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
					
或者$("input").prop("checked",this.checked);
					
					
使用层级选择器
					
$("tbody > tr > td > input").prop("checked",this.checked);
					
或者$("td > input").prop("checked",this.checked);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			/*表格全选和全不选
			 * 进一步确定事件：点击事件
			 * */
			$(function(){
				//绑定点击事件
				//this代表的是当前函数的所有者
			    $("#checkAll").click(function(){
				  //使用元素选择器：选择器[属性名称=‘属性值’]
   				//$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
					//$("input").prop("checked",this.checked);
					
					//使用层级选择器
					//$("tbody > tr > td > input").prop("checked",this.checked);
					$("td > input").prop("checked",this.checked);
					 
					
				});						
			});
		</script>
	</head>
	
    <body>
	  <table border="1px" width="600px" id="tab">
		<tr>
			<td><input type="checkbox"  id="checkAll"/></td>
			<td>分类ID</td>
			<td>分类名称</td>
			<td>分类商品</td>
			<td>分类描述</td>
			<td>操作</td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>1</td>
			<td>手机数码</td>
			<td>华为，小米，尼康</td>
			<td>各类数码产品</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>2</td>
			<td>冰箱彩电</td>
			<td>海尔，TCL，康佳</td>
			<td>各种冰箱彩电</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>3</td>
			<td>鞋靴箱包</td>
			<td>耐克，阿迪，乔丹</td>
			<td>各种鞋靴箱包</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		 </tr>
		 <tr>
			<td><input type="checkbox" /></td>
			<td>4</td>
			<td>香烟酒水</td>
			<td>黄鹤楼，茅台 ，海之蓝</td>
			<td>各种香烟酒水</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		 </tr>
	   </table>			
	</body>
</html>