下面的这个代码是网络上的代码,做一个分析记录,原网址如下 http://www.jq22.com/jquery-info3836
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Jquery表格行全选反选</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="container" style="margin-top:150px;"> 第一步,引入CSS <code><link rel="stylesheet" href="css/bootstrap.min.css"></code><br> 第二步,引入JS <code> <script src="js/jquery-1.11.3.min.js"></script> <br> <script src="js/tableCheckbox.js"></script> <br> </code> 第三步,调用tableCheck <code>$selecter.tableCheck()</code> <hr> 例子:选中行class为“warning” <table class="table table-bordered table-striped" id="myTable"> <thead> <th style="20px;"><input type="checkbox"></th> <th>编程语言</th> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>C</td> </tr> <tr> <td><input type="checkbox"></td> <td>Java</td> </tr> <tr> <td><input type="checkbox"></td> <td>PHP</td> </tr> <tr> <td><input type="checkbox"></td> <td>JavaScript</td> </tr> <tr> <td><input type="checkbox"></td> <td>C++</td> </tr> <tr> <td><input type="checkbox"></td> <td>Python</td> </tr> </tbody> </table> 调用方法:<code>$("#myTable").tableCheck("warning");</code><br> <code>$selecter.tableCheck()</code>括号内为选中行的class,可自定义,example中使用的是Bootstrap,可用的class有 <code>waring</code>、<code>info</code>、<code>success</code> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/tableCheckbox.js"></script> <script> $("#myTable").tableCheck("warning"); </script> </div> </body> </html>
css:
<link rel="stylesheet" href="css/bootstrap.min.css">
js:
(function($){ $.fn.tableCheck = function(allCheckboxClass){ var allCheck = $(this).find("th").find(':checkbox'); var checks = $(this).find('td').find(':checkbox'); var defaults = { selectedRowClass:"active", } var settings = $.extend(defaults,allCheckboxClass); if(allCheckboxClass) settings.selectedRowClass = allCheckboxClass; /*所有checkbox初始化*/ $(this).find(":checkbox").prop("checked",false); /*全选/反选*/ allCheck.click(function(){ var set = $(this).parents('table').find('td').find(':checkbox'); if($(this).prop("checked")){ $.each(set,function(i,v){ $(v).prop("checked",true); $(v).parents('tr').addClass(settings.selectedRowClass); }); }else{ $.each(set,function(i,v){ $(v).prop("checked",false); $(v).parents('tr').removeClass(settings.selectedRowClass); }); } }); /* 监听全选事件 */ checks.click(function(e){ e.stopPropagation();//阻止冒泡 var leng = $(this).parents("table").find('td').find(':checkbox:checked').length; /*勾选后该行active*/ if($(this).prop('checked')){ $(this).parents('tr').addClass(settings.selectedRowClass); }else{ $(this).parents('tr').removeClass(settings.selectedRowClass); } if(leng == checks.length){ allCheck.prop('checked',true); }else{ allCheck.prop("checked",false); } }); /*点击table触发复选框*/ $(this).find("td").click(function(){ var _tr = $(this).parents('tr'); _tr.find(":checkbox").trigger("click"); }); } })(jQuery);