JavaScript--实现全选和单选

最新推荐文章于 2023-11-16 15:56:18 发布

小蔡不会编码

最新推荐文章于 2023-11-16 15:56:18 发布

阅读量249

点赞数

文章标签： javascript servlet java

本文链接：https://blog.youkuaiyun.com/weixin_68250871/article/details/127104849

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="selectAll" />全选/全不选
		<ul class="shop">
			<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>
		<script type="text/javascript">
			//获取到所有的水果的复选框
			var cbs = document.querySelectorAll(".shop input")
			//给全选绑定一个单击事件
			document.getElementById("selectAll").onclick = function() {
				//this:指定的是当前触发单击事件的元素
				console.log(this.checked)
				//获取当前全选的选中状态
				var isChecked = this.checked
				//通过循环来将全选的状态赋值给水果的复选框
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = isChecked
				}
			}
			//给所有的水果的复选框绑定单击事件
			for (var i = 0; i < cbs.length; i++) {
				cbs[i].onclick = function() {
					var count = 0; //用来统计选中的复选框的个数
					for (var j = 0; j < cbs.length; j++) {
						//判断复选框的选中状态
						if (cbs[j].checked) {
							count++
						}
					}
					//判断选中的复选框的个数与实际的复选框的个数是否相等
					if (count == cbs.length) {
						document.getElementById("selectAll").checked = true
					} else {
						//将全选的复选框的状态改为取消
						document.getElementById("selectAll").checked = false
					}
				}
			}
		</script>
	</body>
</html>