jsDOM---多选框练习

最新推荐文章于 2022-09-29 18:00:47 发布

m4587

最新推荐文章于 2022-09-29 18:00:47 发布

阅读量496

点赞数 1

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

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

版权

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

摘要由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属性获取或者设置选中状态

最低0.47元/天解锁文章

m4587

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jsDOM---多选框练习

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

扫一扫