关于input[type='checkbox']全选的问题
今天在做一个全选功能的时候，发现了一个问题，就是如果我在选择全选之前，我就已经选择了一个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']全选的问题的更多相关文章
- jQuery使用prop设置checkbox全选、反选
$(function(){ var checkbox = $("input[type='checkbox']"); //全选 $('#select-all' ...
- checkbox全选-取消-再全选没有显示问题
源码: <input type="checkbox" id="cleckAll" />全选 <div class="list&quo ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 练习-checkbox 全选 ，反选， 单选，以及取值
1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- Jquery 组 checkbox全选checkbox
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- 关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...
- JavaScript -- 操作input CheckBox 全选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js控制input type=checkbox 的勾选
<script type="text/javascript"> $(function () { //双击表格弹出窗口 //为jQ ...
- 表单复选框input[type="checkbox"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
随机推荐
- python3下re模块的使用
**explain:**python3中的re库是一个正则匹配的函数库,里面包含了各种功能的正则函数,下面,我们一起学习下其中的几个常用函数 * **match()方法**: 从主串的起始位置开始匹配 ...
- DStream转为DF的两种方式（突破map时元组22的限制）
在进行Spark Streaming的开发时,我们常常需要将DStream转为DataFrame来进行进一步的处理, 共有两种方式,方式一: val spark = SparkSession.buil ...
- http文件传输
上传端: File uploadFile =new File(); PostMethod mPost = null; try{ String targetURL ="; HttpClient ...
- HTML连载22-序选择器（下）
一.子元素选择器 1. (1)选中标签之中只有一个子元素的子元素,并且那个标签必须使我们格式中前面指定的标签才行 (2)格式: 标签:only-chirld{属性:值:} (3)举例: p:only- ...
- kuangbin专题 专题一 简单搜索 Catch That Cow POJ - 3278
题目链接:https://vjudge.net/problem/POJ-3278 题意:人可以左移动一格,右移动一格,或者移动到当前位置两倍下标的格子 思路:把题意的三种情况跑bfs,第一个到达目的地 ...
- 【Spring容器】项目启动后初始化数据的两种实践方案
早期业务紧急,没有过多的在意项目的运行效率,现在回过头看走查代码,发现后端项目(Spring MVC+MyBatis)在启动过程中多次解析mybatis的xml配置文件及初始化数据,对开发阶段开发人员 ...
- idea中的beautiful插件-自动生成对象set方法
1. 描述 从前端获取VO对象后,好多时候又要生成数据库对象,需要进行赋值,一个个写很浪费时间,介绍一款idea中的beautiful插件,代码开发过程中自动生成对象的set方法,很好用. 2 .插件 ...
- Bzoj 2013 [Ceoi2010] A huge tower 题解
2013: [Ceoi2010]A huge tower Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 471 Solved: 321[Submit ...
- 求1-2/3+3/5-4/7+......49/97和(C语言实现)
一.功能需求 求1 - 2/3 + 3/5 - 4/7 + ......49/97的和 C语言等级考试中也有涉及到类似的需求. 二.代码分析 仔细查看功能需求,可以发现这个等式的三个规律: 1.从每一 ...
- ES6中的解构
数组中的解构: 输出 : 白板 幺鸡 二条 对象的解构: 输出: 老王 12 数组的结构用[];对象的解构用{}:一定要区分它是数组还是解构. 区分方法:看 它是在赋值还是在拿值,等号左边,都为解构, ...