table

1. // 当表格的一整行被选中的时候  前面的单选按钮也被选择    并且要是单选    
2.     // 先将复选框做成单选     
3.     var flag = false;  
4.     $('.xuanze').click(function(){  
5.         $('.xuanze').removeAttr('checked');  
6.         $(this).prop('checked','checked');  
7.         flag = true;  
8.     });   
9.     // 设置点击这一行那么他那行所对应的复选框也被选中  
10.     $(".tr").click(function(){  
11.         // 获得tr下面的第一个td   
12.         var td = $(this).children(":first");  
13.         // 获得复选框    
14.         var checked = td.children(":first");  
15.         // 复选框自己没有选中   并且以前的为选中状态    
16.         if(checked.prop('checked') == true && !flag){  
17.             checked.removeAttr('checked');  
18.         }else{  
19.             // 先将所有全部切换为为选中状态    
20.             $('.xuanze').removeAttr('checked');  
21.             checked.prop('checked',true);  
22.         }  
23.     });  

HTML

[html] view plain copy

1. <table class="table table-hover table-bordered">  
2.             <thead style="background:#ddd;">  
3.             <tr>  
4.                 <th>选择</th>  
5.                 <th>区域名称</th>  
6.                 <th>林种</th>  
7.                 <th>地类</th>  
8.                 <th>优势树种</th>  
9.                 <th>负责小班</th>  
10.             </tr>  
11.             </thead>  
12.             <tbody>  
13.             <tr class='tr'>  
14.                 <td class='td'><input type='checkbox' name='xuanze' class='xuanze'></td>  
15.                 <td>asdfaf</td>  
16.                 <td>asdfsaf</td>  
17.                 <td>adfsaf</td>  
18.                 <td>asdfsaf</td>  
19.                 <td>asdfasf</td>  
20.             </tr>  
21.             <tr class='tr'>  
22.                 <td><input type='checkbox' name='xuanze' class='xuanze'></td>  
23.                 <td>sasafdasdf</td>  
24.                 <td>asdfasf</td>  
25.                 <td>asdfasf</td>  
26.                 <td>asdfsaf</td>  
27.                 <td>asdfasdf</td>  
28.             </tr>  
29.             <tr class='tr'>  
30.                 <td><input type='checkbox' class='xuanze'></td>  
31.                 <td>asdfsafd</td>  
32.                 <td>asdfasf</td>  
33.                 <td>sadfsaf</td>  
34.                 <td>sadfsafda</td>  
35.                 <td>asfdsafasf</td>  
36.             </tr>  
37.             <tr class='tr'>  
38.                 <td ><input type='checkbox' class='xuanze'></td>  
39.                 <td>afdafasf</td>  
40.                 <td>asdfsafsafd</td>  
41.                 <td>asdfasfd</td>  
42.                 <td>sadfsafas</td>  
43.                 <td>asdfasfd</td>  
44.             </tr>  
45.             </tbody>  
46.         </table>