table中列复选框全选，再选 效果
Posted 放荡不羁的春天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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中列复选框全选，再选 效果的主要内容，如果未能解决你的问题，请参考以下文章