jQuery实现复选框全选和全不选

最新推荐文章于 2024-04-17 09:12:12 发布

海底钓鱼

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量1k

点赞数 1

分类专栏： jquery Javaweb

本文链接：https://blog.csdn.net/weixin_42591732/article/details/95938203

版权

本文介绍了两种利用jQuery实现复选框全选和全不选的功能。第一种方法通过添加事件监听器，当点击全选按钮时，遍历并选中所有复选框；第二种方法则是利用级联选择，当父级复选框被选中时，其子级复选框自动选中，反之则取消选中。

摘要由CSDN通过智能技术生成

第一种方法：

<!--实现td框全选th框自动选的两种方法：
	1.根据已经选择的td框的数量，若全选则选
	2.遍历td框，若全选则选
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
    
				margin: auto;
			}
		</style>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!--复选框全选全不选-->
		<script type="text/javascript">
			//让后面的复选框和第一个一致即可
			function c(obj) {
    
				$(".cb").prop("checked", obj.checked)
			}

			//当下面所有的复选框全选之后自动选择最上面的那个复选框
			$(function() {
    
				$("table td :checkbox").click(function() {
    
					var c = $("table td :checkbox").length
					var len = $("table td :checked").length;
					$("table th :checkbox").prop("checked", c == len);
				}) 
			})
		</script>
	</head>

	<body>
		<table id="table" border="1" cellspacing="" cellpadding="" width="40%">
			<tr id="trr">
				<td>
					<button>删除</button>
				</td>

			</tr>
			<tr id="tr1">
				<th class="thclass">