jQuery实现点击复选框即高亮显示选中行全选、反选

来源：互联网发布：美国网络星期一图片编辑：程序博客网时间：2024/06/06 01:01

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery实现点击复选框即高亮显示选中行全选、反选</title>
<style type="text/css">
table{ border:0;border-collapse:collapse;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even{ background:#FFF38F;} /* 偶数行样式*/
.odd{ background:#FFFFEE;} /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="res/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
(function ($) {
$.fn.extend({
"alterBgColor": function (options) {
//设置默认值
options = $.extend({
odd: "odd", /* 偶数行样式*/
even: "even", /* 奇数行样式*/
selected: "selected" /* 选中行样式*/
}, options);
$("tbody>tr:odd", this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$('tbody>tr', this).click(function () {
//判断当前是否选中
var hasSelected = $(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked', !hasSelected);
});
//表头中的checkbox （全选反选）
$("thead>tr th:first :checkbox:first ").click(function () {
//判断当前是否选中
var hasSelected = $(this).attr("checked");
//如果选中，则移出selected类，否则就加上selected类
$('tbody>tr')[!hasSelected ? "removeClass" : "addClass"](options.selected);
if (hasSelected)
$('tbody>tr :checkbox').attr("checked",true);
else
$('tbody>tr :checkbox').attr("checked",false);
});
// 如果单选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)', this).addClass(options.selected);
return this; //返回this，使方法可链。
}
});
})(jQuery);
//插件应用
$(function(){
$("#table2")
.alterBgColor() //应用插件
.find("th").css("color","red");//可以链式操作
});
</script>
</head>
<body>
<table id="table2">
<thead><tr><th><input type="checkbox"/><input type="checkbox" onselect="javascript:alert('kdkdkd');"/></th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>

jQuery实现点击复选框即高亮显示选中行 全选、反选

jQuery实现点击复选框即高亮显示选中行全选、反选