标签：
今天在做一个全选功能的时候，发现了一个问题，就是如果我在选择全选之前，我就已经选择了一个input，然后我再去选择全选并且以后再取消全选的时候，这个我之前选择的input始终处于选择状态，但是他的checked的值一直是在true和false之间变化，当checked=false的时候，仍然是被选中的。到现在还没处理好这个问题。希望看到的哪位大神能给个好的解决办法，实在感激。下面是类似的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 100px;
}
.show{
display: block;
}
.hide{
display: none;
}
.tabs-list button{
margin-right: 10px;
width: 80px;
height: 30px;
border: 1px solid #999;
}
.tabs-list button a{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
}
table{
border: 1px solid #ddd;
border-right: none;
border-bottom: none;
margin-top: 20px;
width: 300px;
}
table td,table th{
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
text-align: center;
width: 100px;
}
.active{
background-color: #999;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="tabs-list">
<button class="active"><a href="#tabs-1">tabs-1</a></button>
<button><a href="#tabs-2">tabs-2</a></button>
<button><a href="#tabs-3">tabs-3</a></button>
<button><a href="#tabs-4">tabs-4</a></button>
</div>
<div class="box">
<table cellspacing="0" id="tabs-1" class="show">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>翠花</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="checkbox" id="all-checked-1"/>
<label for="all-checked-1">全选</label>
</td>
</tr>
</tfoot>
</table>
<table cellspacing="0" id="tabs-2" class="hide">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>国籍</th>
<th>职业</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>美国</td>
<td>运动员</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>中国</td>
<td>律师</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>英国</td>
<td>商人</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="checkbox" id="all-checked-2"/>
<label for="all-checked-2">全选</label>
</td>
</tr>
</tfoot>
</table>
<table cellspacing="0" id="tabs-3" class="hide">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>学科</th>
<th>成绩</th>
<th>是否及格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>语文</td>
<td>99</td>
<td>及格</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>数学</td>
<td>18</td>
<td>不及格</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>英语</td>
<td>60</td>
<td>及格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="checkbox" id="all-checked-3"/>
<label for="all-checked-3">全选</label>
</td>
</tr>
</tfoot>
</table>
<table cellspacing="0" id="tabs-4" class="hide">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>电影</th>
<th>演员</th>
<th>评分</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>港囧</td>
<td>徐峥</td>
<td>5.1</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>煎饼侠</td>
<td>大鹏</td>
<td>6.0</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>道士下山</td>
<td>王宝强</td>
<td>6.3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="checkbox" id="all-checked-4"/>
<label for="all-checked-4">全选</label>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
var btn=document.querySelectorAll(‘.tabs-list button‘);
var table=document.querySelectorAll(‘.box table‘);
var allinput=document.querySelector(‘.show tfoot input‘);
var input=document.querySelectorAll(‘.show tbody input‘);
var label=document.querySelector(‘.show tfoot label‘);
function allCheck(){
if(allinput.checked){
for(var i=0;i<input.length;i++){
input[i].setAttribute(‘checked‘,true);
label.innerHTML=‘取消全选‘;
}
}
else{
for(var i=0;i<input.length;i++){
input[i].removeAttribute(‘checked‘);
label.innerHTML=‘全选‘;
}
}
}
allinput.onclick=function(){
for(var i=0;i<input.length;i++){
input[i].removeAttribute(‘checked‘);
}
allCheck();
}
label.onclick=function(){
for(var i=0;i<input.length;i++){
input[i].removeAttribute(‘checked‘);
}
allCheck();
}
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){
for(var i=0;i<btn.length;i++){
btn[i].removeAttribute(‘class‘);
table[i].setAttribute(‘class‘,‘hide‘);
}
this.setAttribute(‘class‘,‘active‘);
var href=this.querySelector(‘a‘).getAttribute(‘href‘);
var thtable=document.querySelector(href);
thtable.setAttribute(‘class‘,‘show‘);
var allinput=document.querySelector(‘.show tfoot input‘);
var input=document.querySelectorAll(‘.show tbody input‘);
var label=document.querySelector(‘.show tfoot label‘);
function allCheck(){
if(allinput.checked){
for(var i=0;i<input.length;i++){
input[i].setAttribute(‘checked‘,true);
label.innerHTML=‘取消全选‘;
}
}
else{
for(var i=0;i<input.length;i++){
input[i].removeAttribute(‘checked‘);
label.innerHTML=‘全选‘;
}
}
}
allinput.onclick=function(){
allCheck();
}
label.onclick=function(){
allCheck();
}
}
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/ww-ervin-72/p/5055563.html
