- // 当表格的一整行被选中的时候 前面的单选按钮也被选择 并且要是单选
- // 先将复选框做成单选
- 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>