jquery实现checkbox全选功能

最新推荐文章于 2024-04-25 11:38:14 发布

月疯

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量547

点赞数

分类专栏：【easyUI】

本文链接：https://blog.csdn.net/chehec2010/article/details/119733616

版权

【easyUI】专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery3.6.0.js"></script>
	</head>
	<body>
		<table>
			，<thead>
				<tr>
					<th><input type="checkbox"></th>
					<th>姓名</th>
					<th>年龄</th>
					<th>爱好</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>诸葛亮</td>
					<td>80</td>
					<td>喂猪</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>刘备</td>
					<td>62</td>
					<td>入洞房</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>吕布</td>
					<td>38</td>
					<td>杀人</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			$('thread input').change(function(){
				var isChecked=$(this).prop("checked")
				$('tbody input').prop("checked",isChecked);
			})
			
			$('tbody input').change(function(){
				var allCount= $('tbody input').length;
				var checkCount=$('tbody input:checked').length;
				var isAllChecked=allCount===checkCount;
				$('thead input').prop('check',isAllChecked);
			})
		</script>
	</body>
</html>

月疯

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现checkbox全选功能

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery3.6.0.js"></script> </head> <body> <table> ，<thead> <tr> ...
复制链接

扫一扫

专栏目录