jquery 全选、反选、各行换色、单击行选中事件

本文转载自查看原文 2012-01-31 22:47 2995 jquery Manage

jquery 全选、反选、各行换色、单击行选中事件

css样式

View Code

1 <style type="text/css">
2 table{ border-collapse: collapse;}
3 td{ border: 1px solid #D1EEEE;}
4 .tr_odd{ background-color: #B0E0E6;}
5 .tr_even{ background-color: #EEE5DE;}
6 </style>

实现代码：

View Code

1 <script language="javascript">
2 $(document).ready( function(){
3      // 各行换色
4     $('table tr:odd').addClass('tr_odd'); // 奇数行
5     $('table tr:even').addClass('tr_even'); // 偶数行
6      // 单击行选中是事件
7      $("tr").bind("click", function(){
8          if( $( this).hasClass('selected') ){
9             $( this).removeClass('selected')
10                    .find(":checkbox").attr("checked", false);
11         } else{
12             $( this).addClass('selected')
13                    .find(":checkbox").attr("checked", true);
14         }
15     })
16      // 全选事件
17     $("#selectAll").click( function(){
18         $(":checkbox").attr("checked","checked");
19     });
20      // 反选事件
21     $("#unSelect").click( function(){
22          var checkbox=$(":checkbox");
23          for( var i=0;i<checkbox.length;i++){
24             checkbox[i].checked=!checkbox[i].checked;
25         }
26     });
27      // 取消事件
28     $("#cancelSelect").click( function(){
29         $(":checkbox").removeAttr("checked");
30     });
31
32
33 });

html代码

View Code

1 < body >
2 < input type ="button" value ="全选" id ="selectAll" >
3 < input type ="button" value ="反选" id ="unSelect" >
4 < input type ="button" value ="取消" id ="cancelSelect" >
5 < table width ="200" border ="1" >
6    < tr >
7      < td >cxv </ td >
8      < td >zxcv </ td >
9      < td >zxcv </ td >
10    </ tr >
11    < tr >
12      < td >< form id ="form1" name ="form1" method ="post" action ="" >
13        < label >
14          < input type ="checkbox" name ="checkbox" value ="checkbox" />
15          </ label >
16      </ form >     </ td >
17      < td >zxcv </ td >
18      < td >gfh </ td >
19    </ tr >
20    < tr >
21      < td >< form id ="form2" name ="form2" method ="post" action ="" >
22        < label >
23          < input type ="checkbox" name ="checkbox2" value ="checkbox" />
24          </ label >
25      </ form >     </ td >
26      < td >fhg </ td >
27      < td >ghj </ td >
28    </ tr >
29    < tr >
30      < td >< form id ="form3" name ="form3" method ="post" action ="" >
31        < label >
32          < input type ="checkbox" name ="checkbox3" value ="checkbox" />
33          </ label >
34      </ form >     </ td >
35      < td >dfg </ td >
36      < td >fgh </ td >
37    </ tr >
38 </ table >
39 </ body >
40 </ html >

运行结果：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jquery checkbox选中状态以及实现全选反选 jquery checkbox 全选反选等。。。 jQuery实现的全选、反选和不选功能 jQuery实现全选、反选和不选功能 jquery实现全选、全不选、反选、获取选中的所有值总结 Angularjs bootstrap table多选（全选），支持单击行选中 Ant design vue table 单击行选中勾选checkbox 复选框全选、反选及根据值JS控制复选框默认选中事件使用JQuery获取被选中的checkbox的value值以及全选、反选 jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox