今天在做一个全选功能的时候，发现了一个问题，就是如果我在选择全选之前，我就已经选择了一个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>

关于input[type='checkbox']全选的问题的更多相关文章

  1. jQuery使用prop设置checkbox全选、反选

    $(function(){     var checkbox = $("input[type='checkbox']");     //全选     $('#select-all' ...

  2. checkbox全选-取消-再全选没有显示问题

    源码: <input type="checkbox" id="cleckAll" />全选 <div class="list&quo ...

  3. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 练习-checkbox 全选 ，反选， 单选，以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  5. Jquery 组 checkbox全选checkbox

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  6. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  7. JavaScript -- 操作input CheckBox 全选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js控制input type=checkbox 的勾选

    <script type="text/javascript">     $(function () {         //双击表格弹出窗口         //为jQ ...

  9. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

随机推荐

  1. 如何将 qsys 子模块设置为参数可调的方式给另外的qsys 调用

    Intel FPGA Quartus 软件中的 Qsys工具 也就是 Platform Designer 系统集成工具,可以 图形化界面操作 使用系统自带ip,自定义ip 系统自动生成 ip 间的连接 ...

  2. SQL Server温故系列(5)：SQL 查询之分组查询 GROUP BY

    1.GROUP BY 与聚合函数 2.GROUP BY 与 HAVING 3.GROUP BY 扩展分组 3.1.GROUP BY ROLLUP 3.2.GROUP BY CUBE 3.3.GROUP ...

  3. Codeforces 778A：String Game（二分暴力）

    http://codeforces.com/problemset/problem/778/A 题意:给出字符串s和字符串p,还有n个位置,每一个位置代表删除s串中的第i个字符,问最多可以删除多少个字符 ...

  4. 【原创】面试官:讲讲mysql表设计要注意啥

    引言 近期由于复习了一下mysql的内容,有些心得.随手讲其中一部分知识,都是一些烟哥自己平时工作的总结以及经验.大家看完,其实能避开很多坑.而且很多问题,都是面试中实打实会问到的! 比如 OK,具体 ...

  5. oracle获取当天时间的最开始的时间和最结尾的时间

    ),,'yyyy-mm-dd')||' 23:59:59' from dual

  6. 解决thinkphp在开发环境下文件模块找不到的问题

    win10系统下,phpstudy开发环境下小问题描述: 找不到public公共模块. Not Found The requested URL /public/admin/login.html was ...

  7. JSP之BBS论坛网站的创建

    游戏论坛 工具:myeclipse10.0版本 Tomacat是在外部导入的apache-tomcat-7.0.93 JDK版本为1.6.0_13 字符编码统一为utf-8 一．建立数据库(chat) ...

  8. MyBatis 使用枚举或其他对象

    From<Mybatis从入门到精通> 1.笔记: <!-- 6.3 使用枚举或者其他对象 6.3.1 使用MyBatis提供的枚举处理器 不懂: 因为枚举除了本身的字面值外,还可以 ...

  9. 【题解】埃及分数-C++

    Description 在古埃及,人们使用单位分数的和(形如1/a的, a是自然数)表示一切有理数. 如:2/3=1/2+1/6,但不允许2/3=1/3+1/3,因为加数中有相同的. 对于一个分数a/ ...

  10. ASP.NET 前端数据绑定---<%#%>及Eval()的使用

    ASP.NET 前端html代码中会经常出现的<%%>的代码,里面的文本其实就是不能直接输出到客户端浏览器的文本,是需要服务器解释的. 在ASP中,<%%>里面的文本是vbsc ...