实现日期可用性表格Checkbox联动：父选全选子，子全选才选父

需求说明 #

• 勾选日期父Checkbox（如周一）时，该行对应的Morning、Afternoon、Evening三个子Checkbox全部勾选
• 任意子Checkbox取消勾选时，对应的日期父Checkbox自动取消勾选

现有HTML结构 #

<div class="availability-wrap">
<table>
    <thead>
        <th></th>
        <th>Morning</th>
        <th>Afternoon</th>
        <th>Evening</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="monday" id="monday" value="Monday" class="form-control">
                    <label for="monday">
                        <span>Monday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="monday-morning" id="monday-morning" value="Monday morning" class="form-control" checked>
                    <label for="monday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="monday-afternoon" id="monday-afternoon" value="Monday afternoon" class="form-control">
                    <label for="monday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="monday-evening" id="monday-evening" value="Monday evening" class="form-control">
                    <label for="monday-evening"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="tuesday" id="tuesday" value="Tuesday" class="form-control">
                    <label for="tuesday">
                        <span>Tuesday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="tuesday-morning" id="tuesday-morning" value="Tuesday morning" class="form-control">
                    <label for="tuesday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="tuesday-afternoon" id="tuesday-afternoon" value="Tuesday afternoon" class="form-control">
                    <label for="tuesday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="tuesday-evening" id="tuesday-evening" value="Tuesday evening" class="form-control">
                    <label for="tuesday-evening"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="wednesday" id="wednesday" value="Wednesday" class="form-control" checked>
                    <label for="wednesday">
                        <span>Wednesday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="wednesday-morning" id="wednesday-morning" value="Wednesday morning" class="form-control" checked>
                    <label for="wednesday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="wednesday-afternoon" id="wednesday-afternoon" value="Wednesday afternoon" class="form-control" checked>
                    <label for="wednesday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="wednesday-evening" id="wednesday-evening" value="Wednesday evening" class="form-control" checked>
                    <label for="wednesday-evening"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="thursday" id="thursday" value="Thursday" class="form-control">
                    <label for="thursday">
                        <span>Thursday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="thursday-morning" id="thursday-morning" value="Thursday morning" class="form-control">
                    <label for="thursday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="thursday-afternoon" id="thursday-afternoon" value="Thursday afternoon" class="form-control">
                    <label for="thursday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="thursday-evening" id="thursday-evening" value="Thursday evening" class="form-control">
                    <label for="thursday-evening"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="friday" id="friday" value="Friday" class="form-control">
                    <label for="friday">
                        <span>Friday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="friday-morning" id="friday-morning" value="Friday morning" class="form-control">
                    <label for="friday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="friday-afternoon" id="friday-afternoon" value="Friday afternoon" class="form-control">
                    <label for="friday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="friday-evening" id="friday-evening" value="Friday evening" class="form-control">
                    <label for="friday-evening"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="saturday" id="saturday" value="Saturday" class="form-control">
                    <label for="saturday">
                        <span>Saturday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="saturday-morning" id="saturday-morning" value="Saturday morning" class="form-control">
                    <label for="saturday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="saturday-afternoon" id="saturday-afternoon" value="Saturday afternoon" class="form-control">
                    <label for="saturday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="saturday-evening" id="saturday-evening" value="Saturday evening" class="form-control">
                    <label for="saturday-evening"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- dev notes: don't catch this checkbox data (used only for UI/UX purposes) -->
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="sunday" id="sunday" value="Sunday" class="form-control">
                    <label for="sunday">
                        <span>Sunday</span>
                    </label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="sunday-morning" id="sunday-morning" value="Sunday morning" class="form-control">
                    <label for="sunday-morning"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="sunday-afternoon" id="sunday-afternoon" value="Sunday afternoon" class="form-control">
                    <label for="sunday-afternoon"></label>
                </div>
            </td>
            <td>
                <div class="custom-checkbox-wrap">
                    <input type="checkbox" name="sunday-evening" id="sunday-evening" value="Sunday evening" class="form-control">
                    <label for="sunday-evening"></label>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>

未完成的jQuery代码 #

$( '.availability-wrap table input[type="checkbox"]' ).on( 'change', function () {

var checkbox = $( this );
var siblings = $( this ).parents( 'td' ).siblings().find( 'input[type="checkbox"]' );


if ( checkbox.parents( 'td' ).is(':first-child')) {
  siblings.prop( 'checked', checkbox.prop('checked') );

})

完整解决方案代码 #

要实现双向联动，需要补充子Checkbox变化时的逻辑：当子Checkbox改变时，检查该行所有子Checkbox是否都被勾选，以此决定父Checkbox的状态。

$('.availability-wrap table input[type="checkbox"]').on('change', function() {
  const $checkbox = $(this);
  const $row = $checkbox.closest('tr');
  const $parentCheckbox = $row.find('td:first-child input[type="checkbox"]');
  const $childCheckboxes = $row.find('td:not(:first-child) input[type="checkbox"]');

  // 处理父Checkbox勾选/取消的情况
  if ($checkbox.parents('td').is(':first-child')) {
    $childCheckboxes.prop('checked', $checkbox.prop('checked'));
  } else {
    // 处理子Checkbox变化的情况：检查所有子Checkbox是否都已勾选
    const allChecked = $childCheckboxes.filter(':checked').length === $childCheckboxes.length;
    $parentCheckbox.prop('checked', allChecked);
  }
});

逻辑说明 #

1. 父Checkbox触发：当点击第一列的日期父Checkbox时，将该行所有子Checkbox的勾选状态设置为与父Checkbox一致
2. 子Checkbox触发：当任意子Checkbox状态改变时，统计该行所有子Checkbox的勾选数量，若全部勾选则父Checkbox保持勾选，否则取消父Checkbox的勾选

内容的提问来源于stack exchange，提问作者Kristian Pring