jQuery.selectALL插件实现全选和打消全选结果

发布时间：2018-09-02 21:55:24 所属栏目：运营来源：站长网

导读：在前端开拓中，常常会呈现这种环境：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有 jQuery 之前，我们必要一大段js代码来实现这种结果。有了jQuery这个强盛的库之后，我们可以很利便的开拓实现这种结果的jQuery插件。

　　在前端开拓中，常常会呈现这种环境：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有jQuery之前，我们必要一大段js代码来实现这种结果。有了jQuery这个强盛的库之后，我们可以很利便的开拓实现这种结果的jQuery插件。我将它定名为jQuery.fn.selectAll插件。

　　更多jQuery.selectALL的先容：http://www.veryhuo.com/a/view/12520.html

　　jQuery1.4中文手册：http://www.veryhuo.com/a/manual/jquery/

　　实例代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>jQuery实现全选和打消全选插件 - Liehuo.Net</title> <style> body{ text-align:center;font-size:12px;line-height:1.5;} .wrap{ text-align:left;margin:0 auto; width:800px;border-top:2px solid #F30;padding:15px;} .wrap h3{border-bottom:1px solid #F00;} .box{} </style> <script src="/uploads/Common/js/jquery-1.4.min.js"></script> <script src="/uploads/Common/js/jquery.selectAll.js"></script> <script> $(function(){ $("#checkAll").selectAll({ range:'.all' }) $("#checkAll_1").selectAll({ range:'.all_1' }) $("#checkAll_2").selectAll({ range:'.all_2' }) $("#checkAll_3").selectAll({ range:'.all_3' }) }) </script> </head> <body> <h3>jQuery实现全选和打消全选插件</h3> <div class="wrap"> <div class="box"> <dl> <dt><input type="checkbox" id="checkAll" />全选</dt> <dd class="all"> <label for=""><input type="checkbox" />0</label> <label for=""><input type="checkbox" />1</label> <label for=""><input type="checkbox" />2</label> <label for=""><input type="checkbox" />3</label> <label for=""><input type="checkbox" />4</label> <label for=""><input type="checkbox" />5</label> <label for=""><input type="checkbox" />6</label> </dd> </dl> <dl> <dt><input type="checkbox" id="checkAll_1" />全选</dt> <dd class="all_1"> <label for=""><input type="checkbox" />00</label> <label for=""><input type="checkbox" />11</label> <label for=""><input type="checkbox" />22</label> <label for=""><input type="checkbox" />33</label> <label for=""><input type="checkbox" />44</label> <label for=""><input type="checkbox" />55</label> <label for=""><input type="checkbox" />66</label> </dd> </dl> <dl> <dt><input type="checkbox" id="checkAll_2" />全选</dt> <dd class="all_2"> <label for=""><input type="checkbox" />000</label> <label for=""><input type="checkbox" />111</label> <label for=""><input type="checkbox" />222</label> <label for=""><input type="checkbox" />333</label> <label for=""><input type="checkbox" />444</label> <label for=""><input type="checkbox" />555</label> <label for=""><input type="checkbox" />666</label> </dd> </dl> <dl> <dt><input type="checkbox" id="checkAll_3" />全选</dt> <dd class="all_3"> <label for=""><input type="checkbox" />0000</label> <label for=""><input type="checkbox" />1111</label> <label for=""><input type="checkbox" />2222</label> <label for=""><input type="checkbox" />3333</label> <label for=""><input type="checkbox" />4444</label> <label for=""><input type="checkbox" />5555</label> <label for=""><input type="checkbox" />6666</label> </dd> </dl> </div> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

　　原文：http://www.denisdeng.com/?p=669

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要