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

KristianPring
August 31, 2022
171 views
0 votes
2 Answers

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 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') );

})

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

Tags: jquery

Answers

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);
  };
});

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" class="day"...>
```

For each secondary checkbox:

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

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Checking a checkbox if three of its siblings are checked – Jquery

Answers