Question

我有一个标准的html表，它使用分组插件进行了增强。当您点击＆＃34;分组＆＃34;在该级别，表格将展开以显示该组中的任意数量的表格行。我尝试做的是在扩展组时向分组级别的最后一个表格单元格添加一个复选框。当我尝试这样做时，所有分组级别都会收到一个复选框，而不仅仅是我点击的复选框。

HTML代码（已清理和简化）

<!--Grouping Row 1 Expanded-->
<tr id="group-id-example_XXX">
<td colspan="11" class="expanded-group" data-group-level="0">
<div class="checkboxinput"><input type="checkbox" class="check" name="" value=""></div>
</td>
</tr>
<!--Grouping Row 1 Expanded-->

<tr role="row" class="odd group-item" data-group="-b-XXX">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr role="row" class="odd group-item" data-group="-b-XXX">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr role="row" class="odd group-item" data-group="-b-XXX">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<!--Grouping Row 2 Collapsed-->
<tr id="group-id-example_XXX">
<td colspan="11" class="collapsed-group" data-group-level="0">
<div class="checkboxinput"><input type="checkbox" class="check" name="" value=""></div>
</td>
</tr>
<!--Grouping Row 2 Collapsed-->

</tbody>
</table>

jQuery功能

 $('tr[id^="group-id-example"]').on('click', function() {
$(this).find('td').addClass('test');
    if ($('#example tr td').hasClass('test')) {
        $('.checkboxinput').show();
    } else {
        $('.checkboxinput').hide();
    }
     });

Answer 1

问题是，当您使用$('.checkboxinput')时，您正在显示/隐藏所有复选框。如果传递的元素集中的任何元素具有给定的类，则.hasClass()也将返回true，因为您要将类添加到上一行中的某些tds，if条件将始终返回true。

var $checks = $('.checkboxinput');
$('tr[id^="group-id-example"]').on('click', function () {
    var $cchecks = $(this).nextUntil('tr[id^="group-id-example"]').find('.checkboxinput').toggle();
    $checks.not($checks).hide();
});

Answer 2

感谢Arun让我走上正轨。对我有用的是将.nextuntil（）更改为.closest（）。不过，我必须承认，我并不完全理解为什么.nextUntil（）在这里不起作用。

var $checks = $('.checkboxinput');
$('tr[id^="group-id-example"]').on('click', function () {
var $cchecks = $(this).closest('tr[id^="group-id-example"]').find('.checkboxinput').toggle();
$checks.not($checks).hide();
});

将复选框添加到仅具有特定类的表格单元格

2 个答案: