jQuery单击一个复选框应选中一行中的所有复选框

Shibbir

我正在尝试选中一行中的所有复选框(tr)。这样我就使用一个查询代码来做到这一点。但是选中了2行的复选框。

但是应该这样选择：

如果我选择了MON它，则选中它下面的所有复选框。如果我选择了TUE它，则应选中它下面的所有复选框，但现在它是全选的。

  <tr>
    <td><input type="checkbox" name="mon_morning" value="mon_morning" id="checkAll"/>&nbsp;<strong>MON</strong></td>
    <td><input type="checkbox" name="mon_morning" value="mon_morning" class="checkItem"/>&nbsp; Morning</td>
    <td><input type="checkbox" name="mon_afternoon" value="mon_morning" class="checkItem"/>&nbsp; Afternoon</td>
    <td><input type="checkbox" name="mon_evening" value="mon_evening" class="checkItem"/>&nbsp; Evening</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="mon_morning" value="mon_morning" id="checkAll_1"/>&nbsp;<strong>TUE</strong></td>
    <td><input type="checkbox" name="tue_morning" value="tue_morning" class="checkItem_1"/>&nbsp; Morning</td>
    <td><input type="checkbox" name="tue_afternoon" value="tue_morning" class="checkItem_1"/>&nbsp; Afternoon</td>
    <td><input type="checkbox" name="tue_evening" value="tue_evening" class="checkItem_1"/>&nbsp; Evening</td>
  </tr>

<script>
$('#checkAll, #checkAll_1').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
    $(':checkbox.checkItem_1').prop('checked', this.checked);    
 });
</script>

对不起，我的英语不好：(

大卫说恢复莫妮卡

我的第一个想法是：

$('td:first-child input[type="checkbox"]').on('change', function(){
    $(this)
    .closest('td')
    .siblings()
    .find('input[type="checkbox"]').prop('checked', this.checked);
});

JS小提琴演示。

进行了修订，以考虑到<input>元素的类名（我最初错过了）：

$('td:first-child input[type="checkbox"]').on('change', function(){
    $(this)
    .closest('tr')
    .find('.checkItem').prop('checked', this.checked);
});

JS小提琴演示。

更新为具有自动全部选中/取消选中功能（如果中的其他<input>元素处于<tr>选中/取消选中状态）：

$('tr input[type="checkbox"]').on('change', function () {
    var cell = $(this).closest('td'),
        row = cell.parent(),
        checkItems = row.find('.checkItem');
    if (cell.is(':first-child')) {
        checkItems.prop('checked', this.checked);
    } else {
        row.find('td:first-child input')
            .prop('checked', checkItems.length === checkItems.filter(':checked').length);
    }
});

JS小提琴演示。

参考：