js 单选框全选、全不选，反选的操作

最新推荐文章于 2024-11-15 18:05:45 发布

最新推荐文章于 2024-11-15 18:05:45 发布

阅读量826

点赞数

分类专栏： html css js jq 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Vue1024/article/details/122282832

版权

html css js jq 专栏收录该内容

36 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现HTML页面中单选框的全选、全不选和反选功能。通过示例代码展示了如何获取页面上的单选框元素，并为每个按钮绑定点击事件，实现相应的逻辑操作。这有助于提升用户界面的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 单选框全选、全不选，反选的操作

<!DOCTYPE html>
<html>

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

	<body>
		<!DOCTYPE html>
		<html>

		<head>
			<meta charset="utf-8" />
			<title>复选框</title>

			<style type="text/css">

			</style>
		</head>

		<body>
			<input type="checkbox" name="love" />篮球
			<br />
			<input type="checkbox" name="love" />排球
			<br />
			<input type="checkbox" name="love" />羽毛球
			<br />
			<input type="checkbox" name="love" />乒乓球
			<br />
			<input type="button" value="全选" onclick="setAll()" />
			<input type="button" value="全不选" onclick="setNo()" />
			<input type="button" value="反选" onclick="setOthers()" />

			<script type="text/javascript">
				//全选函数
				function setAll() {
					var loves = document.getElementsByName("love");
					for(var i = 0; i < loves.length; i++) {
						loves[i].checked = true;
					}
				}

				//全不选函数
				function setNo() {
					var loves = document.getElementsByName("love");
					for(var i = 0; i < loves.length; i++) {
						loves[i].checked = false;
					}
				}

				//反选
				function setOthers() {
					var loves = document.getElementsByName("love");
					for(var i = 0; i < loves.length; i++) {
						if(loves[i].checked == false)
							loves[i].checked = true;
						else
							loves[i].checked = false;
					}
				}
			</script>

		</body>

		</html>
	</body>

</html>