zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    C语言之指针基础概念
    Android之常用功能代码
    Android之ImageButton控件基础操作
    BZOJ1079或洛谷2476 [SCOI2008]着色方案
    HDOJ2870 Largest Submatrix
    BZOJ1855或洛谷2569 [SCOI2010]股票交易
    BZOJ1233 [Usaco2009Open]干草堆tower
    HDOJ4261 Estimation
    POJ3254或洛谷1879 Corn Fields
    POJ1037 A Decorative Fence
  • 原文地址:https://www.cnblogs.com/dazhangli/p/6668491.html
Copyright © 2011-2022 走看看