Ver las representaciones

Inserte la descripción de la imagen aquí

注意其中可能出现的几个bug
1.点击全选单选框后也应该全选，取消选择其余四个也应该取消选择
2.点击全选多选框以后，正常情况下四个都选中，取消一个选中，多选框也应该取消选中
3.点击全选按钮以后，全选多选框也应该选中
4.点击全不选按钮以后，全选多选框也应该取消选择
5.点击全选按钮以后，点击全不选，多选框应该发生变化

2. En el código

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			你爱好的运动是？<input type="checkbox" id="chkallbox" />全选/全不选
			<br/>
			<input type="checkbox" name="sports" value="散打"/>散打
			<input type="checkbox" name="sports" value="泰拳" />泰拳
			<input type="checkbox" name="sports" value="柔术" />柔术
			<input type="checkbox" name="sports" value="摔跤" />摔跤
			<br />
			<input type="button" id="chkabtn" value="全选" />
			<input type="button" id="chknbtn" value="全不选" />
			<input type="button" id="chkcbtn" value="反选" />
			<input type="button" id="subbtn" value="提交" />
		</form>
		<script type="text/javascript">
			//点击全选按钮以后，四个多选框全部被选中
			var chkabtn = document.getElementById("chkabtn");
			//获取sports对象
			var sports = document.getElementsByName("sports");
			chkabtn.onclick = function(){
    
    
				// console.log(sports[0].value);
				//设置四个多选框为选中状态
				for(var i=0; i<sports.length;i++){
    
    
					sports[i].checked = true;
				}
				chkalbtn.checked = true;
			}
			//点击全不选以后，，四个多选框全不选
			var chknbtn = document.getElementById("chknbtn");
			chknbtn.onclick = function(){
    
    
				Array.from(sports).forEach(e=>e.checked=false);
				chkalbtn.checked = false;
			}
			//偷个懒,定义一个函数
			function myClick(idstr, fun){
    
    
				var btn = document.getElementById(idstr);
				btn.onclick = fun;
			}
			//点击反选以后，选中的变未选
			myClick("chkcbtn",function(){
    
    
				for(let x=0;x<sports.length;x++){
    
    
					sports[x].checked=!sports[x].checked;
				}
				
				//点击反选以后也要对他进行判断
				chkalbtn.checked = true;
				for(let x=0;x<sports.length;x++){
    
    
					if(!sports[x].checked){
    
    
						chkalbtn.checked = false;
						//一旦进入判断，则已经得出结果
						break;
					}
					
				}
			});
			//点击提交以后，弹出选中的按钮
			myClick("subbtn",function(){
    
    
				let arr = new Array();
				Array.from(sports).forEach(x=>{
    
    
					if(x.checked==true){
    
    
						arr.push(x.value);
					}
				});
				alert(arr);
			});
			//全选全不选的多选框，当他选中时，其余的也选中
			var chkalbtn = document.getElementById("chkallbox");
			myClick("chkallbox", function(){
    
    
				for(let i=0;i<sports.length;i++){
    
    
					//等于另一个多选框状态
					//sports[i].checked = chkalbtn.checked;
					//在事件的响应函数中，响应函数是给谁绑定的this就是谁

					sports[i].checked = this.checked;
				}
			});

			for(let i=0;i<sports.length;i++){
    
    
				//要为每一个都绑定一个单击相应函数
				sports[i].onclick = function(){
    
    
					chkalbtn.checked = true;
					console.log("dianwo");
					for(let x=0;x<sports.length;x++){
    
    
						if(!sports[x].checked){
    
    
							chkalbtn.checked = false;
							//一旦进入判断，则已经得出结果
							break;
						}
						
					}
				}
			}
		</script>
	</body>
</html>

js DOM, haga un formulario de selección múltiple de selección única

Ver las representaciones

2. En el código

Supongo que te gusta