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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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实现点击复选框即高亮显示选中行全选、反选