jQuery 实现全选、全不选、反选功能

最新推荐文章于 2022-08-29 21:32:04 发布

何必诗债换酒钱

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量299

点赞数

分类专栏： jQuery web前端文章标签： jquery 全选全不选

本文链接：https://blog.csdn.net/u014395524/article/details/100154515

版权

web前端同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

方法：使用 prop() 来设置 "checked" 属性的值，true 为选中，false 为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo</title>
<style type="text/css">
	ul { list-style: none; margin: 0; padding: 0; }
	.btn, ul li { height: 40px; line-height: 40px; }
	input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; margin: 0 5px 0 30px; }
</style>
</head>
<body>
    <div class="wrap">
    	<div class="btn">
    		<input type="checkbox" id="allcheck">全选
    		<input type="checkbox" id="nocheck">全不选
    		<input type="checkbox" id="reversecheck">反选
    	</div>
    	<ul>
    		<li><input type="checkbox">菜单一</li>
    		<li><input type="checkbox">菜单二</li>
    		<li><input type="checkbox">菜单三</li>
    		<li><input type="checkbox">菜单四</li>
    		<li><input type="checkbox">菜单五</li>
    		<li><input type="checkbox">菜单六</li>
    	</ul>
    </div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// 事件绑定
	function bindEvent() {
		$("body").on("click", ".wrap ul li", function(e) {
			var tag = $(e.target).prop('tagName');
			console.log('tag='+tag);
			if(tag == 'INPUT') {
				queryCheckbox();
			}
		});

		$("body").on("click", ".wrap .btn :checkbox", function(e) {
			var id = $(e.target).attr("id");
			var chked = $(this).prop('checked');
			console.log('id='+id+', chked='+chked);
			switch(id) {
				case 'allcheck':
					setAllCheck(chked);
					break;
				case 'nocheck':
					setNoCheck(chked);
					break;
				case 'reversecheck':
					setReverseCheck(chked);
					break;
			}
		})
	}
	// 反选
	function setReverseCheck(chked) {
		if(chked) {
			$('.wrap ul :checkbox').each(function(){
				var s = $(this).prop('checked');
				$(this).prop('checked', !s);
			});
		}
		queryCheckbox();
		$('#reversecheck').prop('checked', chked);
	}
	// 全不选
	function setNoCheck(chked) {
		$('.wrap ul :checkbox').each(function(){
			$(this).prop('checked', !chked);
		});
		if(chked) {
			$('#allcheck').prop('checked', false);
		}
		else {
			$('#allcheck').prop('checked', true);
		}
	}
	// 全选
	function setAllCheck(chked) {
		$('.wrap ul :checkbox').each(function(){
			$(this).prop('checked', chked);
		});
		if(chked) {
			$('#nocheck').prop('checked', false);
		}
		else {
			$('#nocheck').prop('checked', true);
		}
	}
	// 单个菜单复选框点击时，查询状态
	function queryCheckbox() {
		var chk, chknum = 0;
		chk = $('.wrap ul :checkbox').size();
		$('.wrap ul :checkbox').each(function(){
			if($(this).prop('checked')) {
				chknum++;
			}
		});
		if(chknum == 0) {
			$('#nocheck').prop('checked', true);
			$('#allcheck').prop('checked', false);
		}
		else if(chknum == chk) {
			$('#nocheck').prop('checked', false);
			$('#allcheck').prop('checked', true);
		}
		else {
			$('#nocheck').prop('checked', false);
			$('#allcheck').prop('checked', false);
		}
		$('#reversecheck').prop('checked', false);
	}
	$(function(){
		bindEvent();
	});
</script>
</body>
</html>

何必诗债换酒钱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现全选、全不选、反选功能

方法：使用 prop() 来设置 "checked" 属性的值，true 为选中，false 为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态。<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" cont...
复制链接

扫一扫