使用js实现多选框的全选、反选、以及子多选框影响全选框的勾选

最新推荐文章于 2023-07-11 22:34:21 发布

dataclear

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量783

点赞数 2

分类专栏：多选框文章标签： js实现全选、反选

本文链接：https://blog.csdn.net/dataclear/article/details/89683751

版权

多选框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用js实现多选框的全选、反选、以及子多选框影响全选框的勾选

废话少说，直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.3.1.js"></script>
	</head>
	<script>
		$(function(){
			var cheAll = document.getElementById("checkAll");
			var cheI = document.getElementById('checkI');
			var cheHobby = document.getElementsByClassName("hobby");
			var hobL = $("input[type='checkbox'][class='hobby']").length;
			//实现全选，取消全选
			cheAll.onchange = function(){
				for (var i = 0; i < cheHobby.length; i++) {
					cheHobby[i].checked = cheAll.checked;
					}
			}
			//反选
			cheI.onclick = function(){
				for(let j = 0;j<cheHobby.length;j++){
					cheHobby[j].checked = !cheHobby[j].checked;
				}
			}
			//遍历每个子选择框，为其添加change事件
			for(var i =0;i<cheHobby.length;i++){
				cheHobby[i].onchange = function(){
					var hobCl = $("input[type='checkbox'][class='hobby']:checked").length;
					if(!cheHobby.checked){//有cheHobby没有选中
						cheAll.checked = false;
					}
					if(hobL == hobCl){//当已被选中的checkbox长度与所有的checkbox长度相同时
						cheAll.checked = true;
					}
			  }
			}
		})
	</script>
	<body>
		<form action="test.htm" method="post">
			<input id="checkAll" type="checkbox" />全选
			<br />
			<input id="checkI" type="button" value="反选"/>
			<br />
			<input type="checkbox" class="hobby" />
			<input type="checkbox" class="hobby" />
			<input type="checkbox" class="hobby" />
			<input type="checkbox" class="hobby" />
			<input type="checkbox" class="hobby" />
		</form>
	</body>
</html>

运行效果图：

虽然有点丑，但是功能都实现了的