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"," ...
随机推荐
- SQL SERVER先判断视图是否存在然后再创建视图的语句
如果我们的语句为: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 IF NOT EXISTS(SELECT 1 FROM sys.views WHERE name='Report_I ...
- ajax 多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题
多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题 浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有问 ...
- ABP架构
ABP架构 一.什么是ABP架构? ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate 基于DDD的经典分层 ...
- 1002. 查找常用字符 leecode
题目: 给定仅有小写字母组成的字符串数组 A,返回列表中的每个字符串中都显示的全部字符(包括重复字符)组成的列表.例如,如果一个字符在每个字符串中出现 3 次,但不是 4 次,则需要在最终答案中包含该 ...
- winform datagridview记录的颜色设定
DataGridViewCellStyle属性进行如下图的设置,预览可直接看到效果
- [Flex] 动态获取组件宽度和高度
flex中我们有时并不想一开始就设置某个组件的宽度和高度,而想动态获取某个组件经填充后的width和height,但是会发现width和height均为0,这时我们可以注册一下两个事件之一来解决. i ...
- ubuntu14.04部署kickstart
转自:http://www.mamicode.com/info-detail-1646465.html kickstart用于在内网自动安装系统. 使用pxe安装系统需要安装dhcp,tftp,htt ...
- TCP 的保活定时器
引言 可以没有任何数据流过一个空闲的 TCP 连接. 这意味着我们可以启动一个客户与服务器建 立一个连接,然后离去数小时.数天.数个星期或者数月,而连接依然保持.中间路由器可以崩溃和重启,电话线可以被 ...
- UVA-10929-You can say 11(秦九昭算法+同余与模算术)
原题链接 1000位大数取余: 秦九昭算法+同余与模算术: 1314 = (((1)*10+3)*10+1)*10+4 ( a + b ) % n = ( ( a % n ) + ( b % n ) ...
- 2019.4.18 HTML + CSS相关整理
目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...