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浏览 1825回答 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>你看这个是你想要的效果吗？ -
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>
随时随地看视频慕课网APP
相关分类
JavaScript