复选框全选和选不选，获取选中值

最新推荐文章于 2022-01-07 15:40:24 发布

原创最新推荐文章于 2022-01-07 15:40:24 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现复选框全选功能及如何获取已选中的值。通过JavaScript实现了全选按钮控制所有选项的选择状态，并提供确认按钮来收集并显示选中的值。

复选框全选和选不选，获取选中值。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>

<body>
	<div id="div1">
		<input type="checkbox" id="chkAll" name="chkAll" onclick="chkAll_onclick(this)" />全选<br />
		<input type="checkbox" id="chk1" name="chk" value='1' onclick="chk_onclick(this)" />选项1<br />
		<input type="checkbox" id="chk2" name="chk" value='2' onclick="chk_onclick(this)" />选项2<br />
		<input type="checkbox" id="chk3" name="chk" value='3' onclick="chk_onclick(this)" />选项3<br />
		<input type="checkbox" id="chk4" name="chk" value='4' onclick="chk_onclick(this)" />选项4<br />
		<input type="checkbox" id="chk5" name="chk" value='5' onclick="chk_onclick(this)" />选项5<br />
	</div>
	<a href="javascript:void(0);" onclick="foo();"><button>确认</button></a>
</body>

</html>
<script>
	function chkAll_onclick(obj) {
		var chks = document.getElementsByName("chk");
		for (var i = 0; i < chks.length; i++) {
			chks[i].checked = obj.checked;
		}
	}
	function chk_onclick(obj) {
		var chks = document.getElementsByName("chk");
		var chkAll = document.getElementsByName("chkAll");
		if (obj.checked == false)
			chkAll[0].checked = false;
		else {
			var j = 1;
			for (var i = 0; i < chks.length; i++) {
				if (chks[i].checked == false) {
					j = 2;
					break;
				}
			}
			if (j == 1)
				chkAll[0].checked = true;
		}
	}
	function foo() {
		obj = document.getElementsByName("chk");
		check_val = [];
		for (k in obj) {
			if (obj[k].checked)
				check_val.push(obj[k].value);
		}
		alert(check_val);

	} 
</script>

在这里插入图片描述