jQuery.selectALL插件实现全选和取消全选效果

发布时间：2018-08-23 06:51: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

（编辑：核心网）

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

三星联合开发，真全面	realme Book增强版配置
小米12系列在西欧上线	iPhone 14 Pro前瞻工