table中列复选框全选,再选 效果
<table class="table table-striped sortable table-bordered table-hover " id="zdnews">
<thead>
<tr>
<th>运单号</th>
<th>发货人</th>
<th>收货人</th>
<th>货物信息</th>
<th id="payxf"><input type="checkbox" class="zdcheckbox">现付</th>
<th id="payxf1"><input type="checkbox" class="zdcheckbox">到付</th>
<th id="payxf2"><input type="checkbox" class="zdcheckbox">月结</th>
<th id="payxf3"><input type="checkbox" class="zdcheckbox">回执付</th>
<th id="payxf4"><input type="checkbox" class="zdcheckbox">返厂付</th>
<th >汇总费用</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="ddlook.html">100adggg3253445345454</a>
<br></td>
<td>俞亮
<br>山西省临汾市</td>
<td>匿名
<br>黑龙江省佳木斯市桦南县</td>
<td>龙岩,435件,127千克,32方</td>
<td><input type="checkbox" class="zdcheckbox">100</td>
<td><input type="checkbox" class="zdcheckbox">50</td>
<td><input type="checkbox" class="zdcheckbox">10</td>
<td><input type="checkbox" class="zdcheckbox">20</td>
<td><input type="checkbox" class="zdcheckbox">30</td>
<td><span class="colorred ">0</span></td>
</tr>
<tr>
<td>
<a href="ddlook.html">20adggg3253445345454</a>
<br></td>
<td>俞亮
<br>山西省临汾市侯马市</td>
<td>匿名
<br>黑龙江省佳木斯市桦南县</td>
<td>龙岩,435件,127千克,32方</td>
<td><input type="checkbox" class="zdcheckbox">20</td>
<td><input type="checkbox" class="zdcheckbox">30</td>
<td><input type="checkbox" class="zdcheckbox">40</td>
<td><input type="checkbox" class="zdcheckbox">50</td>
<td><input type="checkbox" class="zdcheckbox">60</td>
<td><span class="colorred ">0</span></td>
</tr>
<tr>
<td>
<a href="ddlook.html">40adggg3253445345454</a>
<br></td>
<td>俞亮
<br>山西省临汾市侯马市</td>
<td>匿名
<br>黑龙江省佳木斯市桦南县</td>
<td>龙岩,435件,127千克,32方</td>
<td><input type="checkbox" class="zdcheckbox">40</td>
<td><input type="checkbox" class="zdcheckbox">10</td>
<td><lable><input type="checkbox" class="zdcheckbox">20</td>
<td><input type="checkbox" class="zdcheckbox">30</td>
<td><input type="checkbox" class="zdcheckbox">50</td>
<td><span class="colorred ">0</span></td>
</tr> </tbody>
</table>
<script>
//现付
$("#payxf").bind("click",function () {
if ($(this).hasClass("checkth")) {
$("#zdnews tr").each(function(){
$(this).find('td').eq(4).find(':checkbox').attr('checked',false);
$(this).find('th').eq(4).find(':checkbox').attr('checked',false);
$(this).find('td').eq(4).removeClass("checkth");
$(this).find('th').eq(4).removeClass("checkth");
})
} else {
$("#zdnews tr").each(function(){
$(this).find('td').eq(4).find(':checkbox').attr('checked',true);
$(this).find('th').eq(4).find(':checkbox').attr('checked',true);
$(this).find('td').eq(4).addClass('checkth');
$(this).find('th').eq(4).addClass('checkth');
})
}
});
//到付
$("#payxf1").bind("click",function () {
if ($(this).hasClass("checkth")) {
$("#zdnews tr").each(function(){
$(this).find('td').eq(5).find(':checkbox').attr('checked',false);
$(this).find('th').eq(5).find(':checkbox').attr('checked',false);
$(this).find('td').eq(5).removeClass("checkth");
$(this).find('th').eq(5).removeClass("checkth");
})
} else {
$("#zdnews tr").each(function(){
$(this).find('td').eq(5).find(':checkbox').attr('checked',true);
$(this).find('th').eq(5).find(':checkbox').attr('checked',true);
$(this).find('td').eq(5).addClass('checkth');
$(this).find('th').eq(5).addClass('checkth');
})
}
});
//月结
$("#payxf2").bind("click",function () {
if ($(this).hasClass("checkth")) {
$("#zdnews tr").each(function(){
$(this).find('td').eq(6).find(':checkbox').attr('checked',false);
$(this).find('th').eq(6).find(':checkbox').attr('checked',false);
$(this).find('td').eq(6).removeClass("checkth");
$(this).find('th').eq(6).removeClass("checkth");
})
} else {
$("#zdnews tr").each(function(){
$(this).find('td').eq(6).find(':checkbox').attr('checked',true);
$(this).find('th').eq(6).find(':checkbox').attr('checked',true);
$(this).find('td').eq(6).addClass('checkth');
$(this).find('th').eq(6).addClass('checkth');
})
}
});
//回执付
$("#payxf3").bind("click",function () {
if ($(this).hasClass("checkth")) {
$("#zdnews tr").each(function(){
$(this).find('td').eq(7).find(':checkbox').attr('checked',false);
$(this).find('th').eq(7).find(':checkbox').attr('checked',false);
$(this).find('td').eq(7).removeClass("checkth");
$(this).find('th').eq(7).removeClass("checkth");
})
} else {
$("#zdnews tr").each(function(){
$(this).find('td').eq(7).find(':checkbox').attr('checked',true);
$(this).find('th').eq(7).find(':checkbox').attr('checked',true);
$(this).find('td').eq(7).addClass('checkth');
$(this).find('th').eq(7).addClass('checkth');
})
}
});
//返厂付
$("#payxf4").bind("click",function () {
if ($(this).hasClass("checkth")) {
$("#zdnews tr").each(function(){
$(this).find('td').eq(8).find(':checkbox').attr('checked',false);
$(this).find('th').eq(8).find(':checkbox').attr('checked',false);
$(this).find('td').eq(8).removeClass("checkth");
$(this).find('th').eq(8).removeClass("checkth");
})
} else {
$("#zdnews tr").each(function(){
$(this).find('td').eq(8).find(':checkbox').attr('checked',true);
$(this).find('th').eq(8).find(':checkbox').attr('checked',true);
$(this).find('td').eq(8).addClass('checkth');
$(this).find('th').eq(8).addClass('checkth');
})
}
}); // 单个选择
$("#zdnews tbody tr").each(function(){
$(this).find('td').bind("click",function () {
if ($(this).hasClass("checkth")) {
$(this).find(':checkbox').attr('checked',false);
$(this).removeClass("checkth"); } else {
$(this).find(':checkbox').attr('checked',true);
$(this).addClass('checkth');
}
});
// })
</script>

table中列复选框全选,再选 效果的更多相关文章
- jQuery中的几个案例:隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- JavaScript小例子:复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
随机推荐
- 虚拟化 - Docker
Docker Desktop (for windows and mac) Docker Desktop 注意 安装时有可能卡主,可以关掉重新装 重启启动时,可能报错"VIRTUALIZATI ...
- 如何安全地运行用户的 JavaScript 脚本
本文来自网易云社区,转载务必请注明出处. 有时候我们需要运行用户输入的 JavaScript 脚本(以下简称脚本).对于我们来说,这些脚本是不可信任的,如果在当前的 Context 中运行这些脚本,它 ...
- 【06】循序渐进学 docker:跨主机通信
写在前面的话 目前解决容器跨主机通信的方案有很多种,这里给出的只是其中的一种,而且还不是最好的方案,不过归根结底,大同小异.在学习 docker swarm 之前,大家可以先看看这种. 啥是 over ...
- 如何自动在Eclipse里对指定类或接口生成要覆盖的方法?
我们经常遇到对对指定类或接口生成要覆盖的方法,但是我们不了解这些类和接口,完全手写不能保证完全正确,那么是否可以准确知道指定类或接口要被覆盖的方法,自动生成这些代码呢?是的,完全可以,按照下面步骤操作 ...
- 从哈希结构去理解PHP数组
php的数组实际上就是hash_table,无论是 数字索引数组array(1, 2, 3) 还是关联数组array(1 => 2, 2=> 4)等等. 一,这里的hash_table有几 ...
- myeclipse上down出的svn项目,文件后面不显示版本号和修改人
找到 windows ->preferences->General->Appearance->Lable Decorations 下拉找到svn 勾选上
- ajax方法参数详解与$.each()和jquery里面each方法的区别
JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为g ...
- iOS hook原理
OC中的method其实是一个结构体 struct objc_method{ SEL method_name char *method_types IMP method_imp } SEL是方法名,I ...
- 《UltraFast设计法实践》系列目录
最近准备开始潜心学习快速和高效的时序收敛设计了,突然想就把整个学习过程做成一个博客系列吧,虽然想想就很激动(技术狗就这么点出息--),但希望坚持下来. 这篇做个目录或者索引,不断向其中添加学习内容. ...
- scrapyd 参考(https://www.jianshu.com/p/2a189127901a)
一 Scrapyd简介 Scrapyd 是一个用来部署和运行 Scrapy 项目的应用,由 Scrapy 的开发者开发.其可以通过一个简单的 Json API 来部署(上传)或者控制你的项目. ...