关于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> < ...
随机推荐
- Spring Dl解释
在UserService中提供一个get/set的name方法,在beans.xml中通过property去注入 一个实现类的属性 name; 3.1 类路径获得配置文件 3.4 BeanFactor ...
- 每天学点node系列-http
任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood's Law http模块概览 http模块主要用于创建http server服务,并且 支持更多特性 ...
- 使用NLog记录业务日志到数据库
项目中很多时候要记录业务日志,其实是可以直接用日志框架计入数据库的. 使用NLog并不是只能将日志主体插入数据库,而是可以根据实际情况自定义任意列记入.非常方便.而且很容易实现 下面是用NLog记录业 ...
- Flink中的状态与容错
1.概述 Flink支持有状态计算,根据支持得不同状态类型,分别有Keyed State和Operator State.针对状态数据得持久化,Flink提供了Checkpoint机制处理:针对状态数据 ...
- python数据库-MySQL与python的交互
一.python3中安装PyMySQL模块 命令安装: sudo apt-get install python-mysql 或者 pip install pymysql 2.使用在pyCharm中安装 ...
- Spring Cloud Alibaba | 序言
目录 Spring Cloud Alibaba | 序言 1. Spring Cloud Alibaba是什么? 2. 主要功能 3. 组件 4. 版本说明 4.1 版本依赖关系 4.2 组件版本关系 ...
- json字符串转换成java对象
- BI之路学习笔记2--SSIS/ETL设计练习三：《DB->定期生成excel表》
上次笔记记到,用sql任务给参数赋值,映射到变量,然后把数据流任务放到序列容器中进行执行,可以定期生成excel, 现在的问题是: 在EXCEL目标编辑过程中,必须选定某一个特定的excel目标,这样 ...
- [记录]HAproxy负载均衡配置教程
HAproxy负载均衡配置教程 一.简介 haproxy是一个开源的高性能负载均衡软件:支持双机热备.虚拟主机和图形化的管理界面,自带强大的对RS健康检查功能:支持TCP(四层).HTTP(七层)应用 ...
- RabbitMQ实战(三)-高级特性
0 相关源码 1 你将学到 如何保证消息百分百投递成功 幂等性 如何避免海量订单生成时消息的重复消费 Confirm确认消息.Return返回消息 自定义消费者 消息的ACK与重回队列 限流 TTL ...