input 选择 全选 反选 的js代码
下面的这个代码是网络上的代码，做一个分析记录，原网址如下 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="width: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);
