jsDOM---多选框练习

最新推荐文章于 2025-01-06 19:06:24 发布

原创

最新推荐文章于 2025-01-06 19:06:24 发布 · 576 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #开发语言

本文介绍如何使用JavaScript实现多选框的全选、全不选和反选功能，包括监听全选按钮以选中所有多选框，全不选按钮取消所有选中状态，反选按钮改变选中状态，以及提交按钮获取选中多选框的value属性。

多选框实现以下功能

全选按钮，点击全选按钮选中全部多选框，
全不选按钮，点击全不选按钮将所有选中状态的多选框取消选中
反选按钮，点击反选按钮将选中状态的多选框反选
提交按钮，点击提交按钮提交后将所有选中状态的多选框的value属性弹出
全选或全不选多选框，若所有多选框都为选中状态，则该多选框状态也为选中；若有一个多选框选中状态为false，则该多选框的状态也为false

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>多选框全选</title>
	<script>
		window.onload = function () {

			//全选按钮
			//点击全选按钮选中全部多选框
			//为id为checkAllbtn的按钮绑定单击函数
			var checkAllbtn = document.getElementById("checkAllbtn");
			//为id为checkAllbox的多选框绑定单击事件
			var checkAllbox = document.getElementById("checkAllbox");
			checkAllbtn.onclick = function () {

				//获取四个多选框
				var items = document.getElementsByName("items");

				//遍历items
				for (var i = 0; i < items.length; i++) {

					//设置四个多选框选中
					//通过checked属性获取或者设置选中状态
					items[i].checked = true;
					checkAllbox.checked = true;
				}
			}


			//全不选按钮
			//为id为checknone的按钮绑定单击事件
			//