Checking a checkbox if three of its siblings are checked-CodePudding

I'm working on days availability table, and I'm trying to figure out how I could make these checkboxes work in parallel. For example, the day Monday, if checked, Monday Morning, Monday Afternoon, Monday Evening will be checked, however, if one of them gets unchecked, the day Monday should be unchecked as well. see screenshot

<div >
<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 >
                    <input type="checkbox" name="monday" id="monday" value="Monday" >
                    <label for="monday">
                        <span>Monday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="monday-morning" id="monday-morning" value="Monday morning"  checked>
                    <label for="monday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="monday-afternoon" id="monday-afternoon" value="Monday afternoon" >
                    <label for="monday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="monday-evening" id="monday-evening" value="Monday evening" >
                    <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 >
                    <input type="checkbox" name="tuesday" id="tuesday" value="Tuesday" >
                    <label for="tuesday">
                        <span>Tuesday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="tuesday-morning" id="tuesday-morning" value="Tuesday morning" >
                    <label for="tuesday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="tuesday-afternoon" id="tuesday-afternoon" value="Tuesday afternoon" >
                    <label for="tuesday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="tuesday-evening" id="tuesday-evening" value="Tuesday evening" >
                    <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 >
                    <input type="checkbox" name="wednesday" id="wednesday" value="Wednesday"  checked>
                    <label for="wednesday">
                        <span>Wednesday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="wednesday-morning" id="wednesday-morning" value="Wednesday morning"  checked>
                    <label for="wednesday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="wednesday-afternoon" id="wednesday-afternoon" value="Wednesday afternoon"  checked>
                    <label for="wednesday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="wednesday-evening" id="wednesday-evening" value="Wednesday evening"  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 >
                    <input type="checkbox" name="thursday" id="thursday" value="Thursday" >
                    <label for="thursday">
                        <span>Thursday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="thursday-morning" id="thursday-morning" value="Thursday morning" >
                    <label for="thursday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="thursday-afternoon" id="thursday-afternoon" value="Thursday afternoon" >
                    <label for="thursday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="thursday-evening" id="thursday-evening" value="Thursday evening" >
                    <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 >
                    <input type="checkbox" name="friday" id="friday" value="Friday" >
                    <label for="friday">
                        <span>Friday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="friday-morning" id="friday-morning" value="Friday morning" >
                    <label for="friday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="friday-afternoon" id="friday-afternoon" value="Friday afternoon" >
                    <label for="friday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="friday-evening" id="friday-evening" value="Friday evening" >
                    <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 >
                    <input type="checkbox" name="saturday" id="saturday" value="Saturday" >
                    <label for="saturday">
                        <span>Saturday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="saturday-morning" id="saturday-morning" value="Saturday morning" >
                    <label for="saturday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="saturday-afternoon" id="saturday-afternoon" value="Saturday afternoon" >
                    <label for="saturday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="saturday-evening" id="saturday-evening" value="Saturday evening" >
                    <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 >
                    <input type="checkbox" name="sunday" id="sunday" value="Sunday" >
                    <label for="sunday">
                        <span>Sunday</span>
                    </label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="sunday-morning" id="sunday-morning" value="Sunday morning" >
                    <label for="sunday-morning"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="sunday-afternoon" id="sunday-afternoon" value="Sunday afternoon" >
                    <label for="sunday-afternoon"></label>
                </div>
            </td>
            <td>
                <div >
                    <input type="checkbox" name="sunday-evening" id="sunday-evening" value="Sunday evening" >
                    <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') );

})

Here's what I've tried: https://codepen.io/pringkr/pen/poLMXJm

CodePudding user response：

If you give all the Morning, Afternoon, Evening checkboxes a class called timecheckbox
and the Monday-Sunday a class called daycheckbox
you could do something like:

$('input.daycheckbox').on('change', function() {
  $(this).closest('tr').find('input.timecheckbox')
    .prop('checked', $(this).prop('checked'));
});


$('input.timecheckbox').on('change', function() {
  parentrow = $(this).closest('tr');
  if (parentrow.find('input.timecheckbox:checked').length == 3){
    parentrow.find('input.daycheckbox').prop('checked', true);
  }else{
    parentrow.find('input.daycheckbox').prop('checked', false);
  };
});

CodePudding user response：

It gets very complicated when using position within a table to locate specific elements with simular behavior. This solution depends entirely on #id and .className so you can apply this to any HTML layout as long as the following are adhered to:

For each primary checkbox:

assign an #id as it's designated day
```
<input id="monday"...>
```
assign a .className as "day"
```
<input id="monday" ...>
```

For each secondary checkbox:

assign it's first class as it's designated day
```
<input ...>
```
assign it's second class as "time"
```
<input ...>
```

Order of .classNames are important

Details are commented in example

/**
 * When any .day changes...
 * ...define >day< as the changed .day #id
 * If the changed .day is checked...
 * ...check all checkboxes with the class of "time"
 * and >day<...
 * ...otherwise, uncheck all checkboxes previously
 * mentioned
 */
$('.day').on('change', function() {
  const day = this.id;
  console.log(day);
  if (this.checked) {
    $('.time.'   day).prop('checked', true);
  } else {
    $('.time.'   day).prop('checked', false);
  }
});

/**
 * When any .time is changed...
 * ...define >day< as the changed .time first .className
 * of it's classList.
 * If all checkboxes with the class of "time" and >day<
 * are checked... ⚝ See below
 * ...check the checkbox with the #id of >day<...
 * ...otherwise uncheck the previously mentioned
 */
$('.time').on('change', function() {
  const day = this.classList[0];
  console.log(day);
  if ($('.time.'   day).toArray().every(chk => chk.checked)) {
    $('#'   day).prop('checked', true);
  } else {
    $('#'   day).prop('checked', false);
  }
});
/** ⚝
 * $('.time.'   day).toArray() converts all elements into an array of
 * elements
 * .every(chk => chk.checked) returns true if all elements in array are 
 * checked
 */

.as-console-row::after { content: ''; width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { min-height: 100%; max-width: 50%; margin-left: 50%; }

<input id='monday' class='day' type='checkbox'> <label for='monday'> Monday</label><br>
<input id='mM' class='monday time' type='checkbox'> <label for='mM'> Monday Morning</label><br>
<input id='mA' class='monday time' type='checkbox'> <label for='mA'> Monday Afternoon</label><br>
<input id='mE' class='monday time' type='checkbox'> <label for='mE'> Monday Evening</label><br>
<hr>
<input id='tuesday' class='day' type='checkbox'> <label for='tuesday'> Tuesday</label><br>
<input id='tM' class='tuesday time' type='checkbox'> <label for='tM'> Tuesday Morning</label><br>
<input id='tA' class='tuesday time' type='checkbox'> <label for='tA'> Tuesday Afternoon</label><br>
<input id='tE' class='tuesday time' type='checkbox'> <label for='tE'> Tuesday Evening</label><br>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>