JS 全选多选框练习

最新推荐文章于 2024-09-20 11:38:47 发布

ฅ逸魚

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量126

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47186832/article/details/109711063

版权

JavaScript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用JavaScript实现HTML表单中多选框的全选、全不选和反选功能。当用户点击全选按钮时，所有多选框被选中；点击全不选按钮时，所有多选框被取消选中；点击反选按钮时，已选中的变为未选中，未选中的变为选中。此外，当选中状态发生变化时，会自动更新全选/全不选的多选框状态。最后，提交按钮用于显示选中的爱好运动。

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

<script type="text/javascript">
	//全选全部选的多选框
	var checkedAllBox=document.getElementById("checkedAllBox");

	window.onload=function () {
		//1、#checkedAllBtn
		var checkedAllBtn=document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick=function () {
			//获取四个多选框
			var items = document.getElementsByName("items");
			//遍历items
			for ( var i=0;i<items.length;i++) {
				//通过多选框的checked属性可以来获取或设置多选框的选中状态
				//alert(items[i].checked);

				//设置四个多选框变成选中状态
				items[i].checked = true;
			}
			checkedAllBox.checked = true;
		};

		//2、#checkedNoBtn
		var checkedNoBtn=document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick=function () {
			for ( var i=0;i<items.length;i++) {
				items[i].checked = false;
			}
			checkedAllBox.checked = false;
		};

		//3、checkedRevBtn
		var checkedRevBtn=document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick=function () {
			checkedAllBox.checked = true;
			for ( var i=0;i<items.length;i++) {
				//判断多选框已经选中，则设置为没选中的状态
				/*if(items[i].checked){
					items[i].checked=false;
				}else{
					items[i].checked = true;
				}*/
				items[i].checked = !items[i].checked;

				for (var j=0;j<items.length;j++){
					if (items[j].checked){
						checkedAllBox.checked = false;
						break;
					}
				}
				//反选时也需要判断多选框是否选中
				//checkedAllBox.checked = false;
				/*
				for (var j=0;j<items.length;j++){
					if (items[j].checked){
						checkedAllBox.checked = false;
						break;
					}
				}*/
		};

		//4、sendBtn
		var sendBtn=document.getElementById("sendBtn");
		sendBtn.onclick=function () {
			for ( var i=0;i<items.length;i++) {
				//判断多选框是否选中
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		};

		//全选全不选的多选框
		var checkedAllBox=document.getElementById("checkedAllBox");
		checkedAllBox.onclick=function () {
			for ( var i=0;i<items.length;i++) {
				items[i].checked = this.checked;
			}
		};

		//四个多选框和checkedAllBox之间的练习（三个不全选，自动跳转）
		for ( var i=0;i<items.length;i++) {
			items[i].onclick = function () {
				//设置默认选中状态
				checkedAllBox.checked = true;
				//判断四个多选框是否全选
				for (var j=0;j<items.length;j++){
					if (items[j].checked){
						//一旦进入判断，则不是全选状态
						checkedAllBox.checked = false;
						//一旦进入判断则不用再判断
						break;
					}
				}
			};
		}
	}
</script>

<body>
    <form method="post" action="">
        你爱好的运动？<input type="checkbox" id="checkedAllBox"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全选"/>足球
        <input type="button" id="checkedNoBtn" value="全不选"/>足球
        <input type="button" id="checkedRevBtn" value="反选"/>足球
        <input type="button" id="sendBtn" value="提交"/>足球
    </form>
</body>