JS
// 当表格的一整行被选中的时候 前面的单选按钮也被选择 并且要是单选
// 先将复选框做成单选
var flag = false;
$('.xuanze').click(function(){
$('.xuanze').removeAttr('checked');
$(this).prop('checked','checked');
flag = true;
});
// 设置点击这一行那么他那行所对应的复选框也被选中
$(".tr").click(function(){
// 获得tr下面的第一个td
var td = $(this).children(":first");
// 获得复选框
var checked = td.children(":first");
// 复选框自己没有选中 并且以前的为选中状态
if(checked.prop('checked') == true && !flag){
checked.removeAttr('checked');
}else{
// 先将所有全部切换为为选中状态
$('.xuanze').removeAttr('checked');
checked.prop('checked',true);
}
});
HTML
<table class="table table-hover table-bordered">
<thead style="background:#ddd;">
<tr>
<th>选择</th>
<th>区域名称</th>
<th>林种</th>
<th>地类</th>
<th>优势树种</th>
<th>负责小班</th>
</tr>
</thead>
<tbody>
<tr class='tr'>
<td class='td'><input type='checkbox' name='xuanze' class='xuanze'></td>
<td>asdfaf</td>
<td>asdfsaf</td>
<td>adfsaf</td>
<td>asdfsaf</td>
<td>asdfasf</td>
</tr>
<tr class='tr'>
<td><input type='checkbox' name='xuanze' class='xuanze'></td>
<td>sasafdasdf</td>
<td>asdfasf</td>
<td>asdfasf</td>
<td>asdfsaf</td>
<td>asdfasdf</td>
</tr>
<tr class='tr'>
<td><input type='checkbox' class='xuanze'></td>
<td>asdfsafd</td>
<td>asdfasf</td>
<td>sadfsaf</td>
<td>sadfsafda</td>
<td>asfdsafasf</td>
</tr>
<tr class='tr'>
<td ><input type='checkbox' class='xuanze'></td>
<td>afdafasf</td>
<td>asdfsafsafd</td>
<td>asdfasfd</td>
<td>sadfsafas</td>
<td>asdfasfd</td>
</tr>
</tbody>
</table>
缺陷 点击里面的复选框的时候不能取消