我正在处理Days Available表，我想知道如何让这些复选框并行工作.例如，如果选中日期星期一，则将选中星期一上午、星期一下午、星期一晚上，但是，如果其中一个未选中，则也应取消选中日期星期一.see screenshot个
<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>
$( '.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') );
})