javascript 全选全不选反选提交

最新推荐文章于 2024-07-26 20:46:33 发布

小小阿星

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量308

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47591145/article/details/110222861

版权

<script type="text/javascript">

	window.onload = function(){
		// 获取四个多选框
		var items = document.getElementsByName("items")
		console.log(items)
		// 获取多选框 全选全不选
		var checkedAllBox = document.getElementById("checkedAllBox")
		
		/* 
			全选
		 */
		// 获取全选按钮
		var checkedAllBtn = document.getElementById("checkedAllBtn")
		console.log(checkedAllBtn)
		checkedAllBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = true
			}
			checkedAllBox.checked = true
		}
		/* 
		 全不选
		 */
		// 获取全不选按钮
		var checkedNoBtn = document.getElementById("checkedNoBtn")
		console.log(checkedNoBtn)
		checkedNoBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = false
			}
			checkedAllBox.checked = false
		}
		
		/* 
		 全选全不选
		 */
		// 给全选全不选多选框注册点击事件
		checkedAllBox.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = this.checked
			}
		}
		
		/*
			提交按钮 ：当点击提交按钮时 选中的都弹窗
		 */
		var sendBtn = document.getElementById("sendBtn")
		console.log(sendBtn)
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}
		
		/* 
		 反选
		 */
		// 获取反选按钮
		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;
				if(!items[i].checked){
					checkedAllBox.checked = false
				}
			}
		}
		
		/* 
		 items  
			如果四个多选框都被选中，则checkedAllBox选中
			如果四个多选框都被没选中，则checkedAllBox没选中
		 */
		// 遍历四个爱好多选框 并给其绑定事件
		for(var i = 0 ;i < items.length; i++){
			items[i].onclick = function(){
				checkedAllBox.checked = true
				// 
				for(var j = 0; j < items.length;j++){
					console.log(j)
					/* !true  = false
					!true  = false
					!false = true */
					// 判断如果四个爱好中有一个为false 则全选全不选多选框也为false
					if(!items[j].checked){
						checkedAllBox.checked = false
					}
				}
			}
		}
	}
</script>
</head>
<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>

小小阿星

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript 全选全不选反选提交

<script type="text/javascript"> window.onload = function(){ // 获取四个多选框 var items = document.getElementsByName("items") console.log(items) // 获取多选框全选全不选 var checkedAllBox = document.getElementById("checkedAllBox") /* 全选 */ /
复制链接

扫一扫