jquery实现checkbox 全选、反选（含2级筛选）

最新推荐文章于 2022-08-29 21:58:42 发布

键指江湖

最新推荐文章于 2022-08-29 21:58:42 发布

阅读量535

点赞数 1

分类专栏： jquery 文章标签： jquery checkbox

本文链接：https://blog.csdn.net/ahui829/article/details/107959073

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.test1{
				background: #D9EDF7;
			}
		</style>
	</head>
	<body>
		<form action="">
			<div class="test1">
				<div>
					<input type="checkbox" id="allCheck">全选
				</div>
				<div>
					<input type="checkbox" name="items">选项1
					<input type="checkbox" name="items">选项2
					<input type="checkbox" name="items">选项3
					<input type="checkbox" name="items">选项4
					<input type="checkbox" name="items">选项5
					<input type="checkbox" name="items">选项6
				</div>
			</div>
		</form>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function() {
				/*分类 全选*/
				$("#allCheck").click(function() {
					if (this.checked) {
						$("input[name='items']").each(function() {
							$(this).prop("checked", true);
						});
					} else {
						$("input[name='items']").each(function() {
							$(this).prop("checked", false);
						});
					}
				});
				/* 单个取消 则全选取消勾选 */
				$("input[name='items']").click(function() {
					var s = $("input[name='items']").length;
					var a = $("input[name='items']:checked").length;
					if (s == a) {
						$("#allCheck").prop('checked', true);
					} else {
						$("#allCheck").prop('checked', false);
					}
				});
			})
		</script>
	</body>
</html>

效果
在这里插入图片描述

2级全选反选（升级）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<form action="">
			<div class="pop-second-check">
				<div class="all-check">
					全选 <input type="checkbox" id="all_check" checked="checked">
				</div>
				<ul class="second-check">
					<li>一级类目<input type="checkbox" name="items" class="second-check-all" checked="checked">
						<ul class="third-check">
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
						</ul>
					</li>
					<li>
						一级类目<input type="checkbox" name="items" class="second-check-all" checked="checked">
						<ul class="third-check">
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
							<li>二级类目<input type="checkbox" name="items" checked="checked"></li>
						</ul>
					</li>
				</ul>
			</div>
		</form>

		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function() {
				/*全选反选*/
				$("#all_check").click(function() {
					if (this.checked) {
						$("input[name='items']:checkbox").each(function() {
							$(this).prop("checked", true);
						});
					} else {
						$("input[name='items']:checkbox").each(function() {
							$(this).prop("checked", false);
						});
					}
				});
				/* 一级全选 */
				$(".second-check-all").click(function() {
					if (this.checked) {
						$(this).parent().children().find('input').prop('checked', true)
					} else {
						$(this).parent().children().find('input').prop('checked', false)
					}
				});
				/* 所有二级选择后 */
				$(".third-check input[name='items']").click(function() {
					var c = $(this).parent().parent().children().find('input:checked').length
					//console.log(c)
					if (c == 0) {
						$(this).parent().parent().siblings(".second-check-all").prop('checked', false)
					} else {
						$(this).parent().parent().siblings(".second-check-all").prop('checked', true)
					}
				});
				/* 所有选择后 */
				$("input[name='items']").click(function() {

					var s = $("input[name='items']").length;
					var a = $("input[name='items']:checked").length;
					if (s == a) {
						$("#all_check").prop('checked', true);
					} else {
						$("#all_check").prop('checked', false);
					}
				});
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

键指江湖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery实现checkbox 全选、反选（含2级筛选）

<form action=""> <div class="test1"> <div> <input type="checkbox" id="allCheck">全选 </div> <div> <input type="checkbox" name="items">选项1 <input type="checkbox" name="items">选项2 <input typ
复制链接

扫一扫