今天在做一个全选功能的时候，发现了一个问题，就是如果我在选择全选之前，我就已经选择了一个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. Python连载20-偏函数&zip函数&enumerate函数

    一. 偏函数 二. #先举个例子 #把字符串转换为十进制数字 int(') #help(int),int函数中有一个参数base代表把它转换某个进制的数字 #把八进制的字符串转换为十进制 eight ...

  2. springboot+redis实现session共享

    1.场景描述 因项目访问压力有点大,需要做负载均衡,但是登录使用的是公司统一提供的单点登录系统,需要做session共享,否则假如在A机器登录成功,在B机器上操作就会存在用户未登录情况. 2. 解决方 ...

  3. DRF + react 实现TodoList

    在web项目构建中有很多框架可供选择,开发人员对项目的使用选择,有很多的影响因素,其中之一就是框架在定义该项目的单独任务时的复杂性. 简介 本文有如下几个部分: 准备 配置后端 配置APIs 配置前端 ...

  4. samba搭建与配置说明

    1. 环境检查getenforce 检查selinux service iptables stop 2.安装samba yum -y install samba 3.配置samba /etc/samb ...

  5. java8中stream常用方法详解

    map: 用作类型转换 如把集合里面的字符串转为大写,或者一个对象的集合取几个字段转为新的对象集合filter: 过滤 符合条件的集合元素保存下来,不符合条件的去掉flatMap:合并集合,比如Lis ...

  6. 关于使用 AJax 生成Form表单，且表单提交需要验证，验证实效的解决方法

    @Ajax.ActionLink("添加", "AddUser",new AjaxOptions() {InsertionMode = InsertionMod ...

  7. 数组指针&&指针数组

    数组指针: 定义 int (*p)[n];      占用内存中一个指针的存储空间 ()优先级高,首先说明p是一个指针,指向一个int型的一维数组,故名数组(的)指针.指向的一维数组的长度是n,也可以 ...

  8. 74859a颜色信息

    74859a十进制的RGB值为R:116, G:133, B:154. CMYK值为C:24.675, M:13.636, Y: 0.0, K: 39.608 RGB 116, 133, 154 百分 ...

  9. GIL与异步回调

    07.07自我总结 一.GIL 1.概念 在CPython中,这个全局解释器锁,也称为GIL,是一个互斥锁 2.带来的问题 首先必须明确执行一个py文件,分为三个步骤 从硬盘加载Python解释器到内 ...

  10. baserecyclerviewadapterhelper -- setOnItemChildClickListener出现的问题

    出现问题 使用baserecyclerviewadapterhelper 的时候使用 adapter.setOnItemChildClickListener()方法,点击没有反应. adapter.s ...