jsDOM---多选框练习

最新推荐文章于 2024-07-26 19:28:01 发布

m4587

最新推荐文章于 2024-07-26 19:28:01 发布

阅读量508

点赞数 1

文章标签： javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/m4587/article/details/126499861

版权

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

摘要由CSDN通过智能技术生成

多选框实现以下功能

全选按钮，点击全选按钮选中全部多选框，
全不选按钮，点击全不选按钮将所有选中状态的多选框取消选中
反选按钮，点击反选按钮将选中状态的多选框反选
提交按钮，点击提交按钮提交后将所有选中状态的多选框的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属性获取或者设置选中状态