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");
}
}
2 回答
FSYu
TA贡献152条经验 获得超59个赞
<!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
TA贡献11条经验 获得超2个赞
<!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/150
提交
取消