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>

时间: 2024-07-29 03:48:52

table中列复选框全选,再选 效果的相关文章

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

checkbox复选框全选批量删除

多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]"

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

jQuery实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa