猿问

js怎么实现多选按钮点击下面两个按钮，最上面的也选中

js怎么实现多选按钮点击下面两个按钮，最上面的也选中，然后下面两个按钮只有一个的时候，最上的自动取消。

我这个代码只能实现一次操作，在点就不行了

	var aa =0；
	function push(all){
		all.setAttribute("aa","aa");
		
		var td1 = document.getElementsByClassName("tdd");
	 	var aa = 0;
		
		for(var i = 0 ; i < td1.length ; i++){
			var nn = td1[i].getAttribute("aa");
			if(nn !="aa"){
				aa= 1;
			}
		}
	if(aa==0){
		var ss =document.getElementById("p");
		ss.setAttribute("checked","checked");
	}
	
	}


whenia
浏览 1880回答 2
2回答

FSYu

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { border: 1px solid #333; margin: 0 auto; } table td { border: 1px solid #333; } table th { border: 1px solid #333; } </style> </head> <body> <table width="400" border="0" cellspacing="0" cellpadding="0"> <thead> <th> <input type="checkbox" id="all" disabled> </th> <th>用户名</th> <th>姓名</th> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox"> </td> <td>admin</td> <td>admin</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>admin</td> <td>admin</td> </tr> </tbody> </table> <script> var tb = document.getElementById("tb"); var all = document.getElementById("all"); var tbCheckBox = tb.getElementsByTagName("input"); var checkList = []; for (var i = 0; i < tbCheckBox.length; i++) { tbCheckBox[i].onclick = function() { if (this.checked) { checkList.push(this.checked); } else { var index = checkList.indexOf(!this.checked); checkList.splice(index, 1); } if (checkList.length == tbCheckBox.length) { all.checked = true; } else { all.checked = false; } } } </script> </body> </html>你看这个是你想要的效果吗？
0

sheshunjiang

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> table{border-collapse: collapse;} table td,table th{border:1px solid #000;width: 100px;} </style> <script type="text/javascript"> window.onload=function(){ var oTable=document.getElementById("table"); var oTbody=oTable.getElementsByTagName("tbody")[0]; var oBtn=document.getElementById("btn"); var aInput=oTbody.getElementsByTagName("input"); var falg=true; oBtn.onclick=function(){ if(!falg){ this.checked=false; for(var i=0;i<aInput.length;i++){ aInput[i].checked=false; }; }else{ this.checked=true; for(var i=0;i<aInput.length;i++){ aInput[i].checked=true; }; } falg=!falg; }; for(var i=0;i<aInput.length;i++){ aInput[i].onclick=function(){ var check=true; for(var j=0;j<aInput.length;j++){ if(!aInput[j].checked){ oBtn.checked=false; check=false; break; } } if(check){ oBtn.checked=true; } }; }; }; </script></head><body> <table id="table"> <thead> <tr> <th><input type="checkbox" name="" id="btn"></th> <th>用户名</th> <th>姓名</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name=""></td> <td>admin</td> <td>admin</td> </tr> <tr> <td><input type="checkbox" name=""></td> <td>admin</td> <td>admin</td> </tr> </tbody> </table></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答