Deselect all child elements when the parent checkbox is not selected

Question

Deselect all child elements when the parent checkbox is not selected

Creating a page that features multiple checkboxes, some nested and others not. When a particular checkbox is selected, additional options will be displayed underneath it for selection; if unchecked, the child boxes will be hidden. Currently, this functionality is achieved solely with CSS. The goal is for checking a parent box to reveal the child options without automatically checking them. The user selects the desired boxes and submits the values, including those in the parent checkboxes. However, when any of the parent boxes are unchecked, the children should also be unchecked. Below is the code snippet for reference.


input {
position: absolute;
left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}
...

...

Currently, unchecking the first option hides the other checkboxes while they remain visually "checked." Efforts are being made to synchronize the visibility of options with their checked status.

jquery html css

Answer 1

Answer №1

When dealing with jQuery tags, it becomes quite simple. Just include a class in the "additional info" section which we can utilize as a convenient hook positioned next to the original checkbox.

$(document).ready(function(){
$("input[type=checkbox]").on("click", function(){
    // Check if there is a sibling with the additional-info class
    if($(this).siblings(".additional-info").length > 0){
      // If checkbox is unchecked
      if(!$(this).is(":checked")){
        // Uncheck the checkbox
        $(this).siblings(".additional-info").find("[type=checkbox]").prop("checked", false);
      }
    }
})
});

input {
position: absolute;
left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked ~ #bodyparts {
  display: block;
}

#neck:checked ~ #direction {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<input id="permitted" type="checkbox">
<label for="permitted" class="side-label">Click to show more options</label>
<div id="bodyparts">
<input id="head" type="checkbox">
<label for="head">head</label>

<input id="neck" type="checkbox">
<label for="neck">neck (click for more options)</label>

<div id="direction" class="additional-info">
<input id="left" type="checkbox">
<label for="left">left</label>

<input id="right" type="checkbox">
<label for="right">right</label>

<input id="both" type="checkbox">
<label for="both">both</label>
</div>

<input id="middle-back" type="checkbox">
<label for="middle-back">middle back</label>

<input id="lower-back" type="checkbox">
<label for="lower-back">lower back</label>
</div>
</section>

Answer 2

When dealing with jQuery tags, it becomes quite simple. Just include a class in the "additional info" section which we can utilize as a convenient hook positioned next to the original checkbox.

$(document).ready(function(){
$("input[type=checkbox]").on("click", function(){
    // Check if there is a sibling with the additional-info class
    if($(this).siblings(".additional-info").length > 0){
      // If checkbox is unchecked
      if(!$(this).is(":checked")){
        // Uncheck the checkbox
        $(this).siblings(".additional-info").find("[type=checkbox]").prop("checked", false);
      }
    }
})
});

input {
position: absolute;
left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked ~ #bodyparts {
  display: block;
}

#neck:checked ~ #direction {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<input id="permitted" type="checkbox">
<label for="permitted" class="side-label">Click to show more options</label>
<div id="bodyparts">
<input id="head" type="checkbox">
<label for="head">head</label>

<input id="neck" type="checkbox">
<label for="neck">neck (click for more options)</label>

<div id="direction" class="additional-info">
<input id="left" type="checkbox">
<label for="left">left</label>

<input id="right" type="checkbox">
<label for="right">right</label>

<input id="both" type="checkbox">
<label for="both">both</label>
</div>

<input id="middle-back" type="checkbox">
<label for="middle-back">middle back</label>

<input id="lower-back" type="checkbox">
<label for="lower-back">lower back</label>
</div>
</section>

Answer 3

Answer №2

Let me demonstrate how to accomplish this task for one section as an example of what needs to be done.

Given the absence of a clearly defined parent-child hierarchy, the solution involves directly referencing elements by their id attributes:

neck.addEventListener('change', () => {
  if (neck.checked) [left, right, both].forEach(el => el.checked = false);
})

input {
  position: absolute;
  left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover,
input:focus+label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked+label {
  background-color: #ab576c;
}

input:checked+label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked~#bodyparts {
  display: block;
}

#neck:checked~#direction {
  display: block;
}

<section>
  <input id="permitted" type="checkbox">
  <label for="permitted" class="side-label">Click to show more options</label>
  <div id="bodyparts">
    <input id="head" type="checkbox">
    <label for="head">head</label>

    <input id="neck" type="checkbox">
    <label for="neck">neck (click for more options)</label>

    <div id="direction">
      <input id="left" type="checkbox">
      <label for="left">left</label>

      <input id="right" type="checkbox">
      <label for="right">right</label>

      <input id="both" type="checkbox">
      <label for="both">both</label>
    </div>

    <input id="middle-back" type="checkbox">
    <label for="middle-back">middle back</label>

    <input id="lower-back" type="checkbox">
    <label for="lower-back">lower back</label>
  </div>
</section>

Answer 4

Let me demonstrate how to accomplish this task for one section as an example of what needs to be done.

Given the absence of a clearly defined parent-child hierarchy, the solution involves directly referencing elements by their id attributes:

neck.addEventListener('change', () => {
  if (neck.checked) [left, right, both].forEach(el => el.checked = false);
})

input {
  position: absolute;
  left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover,
input:focus+label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked+label {
  background-color: #ab576c;
}

input:checked+label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked~#bodyparts {
  display: block;
}

#neck:checked~#direction {
  display: block;
}

<section>
  <input id="permitted" type="checkbox">
  <label for="permitted" class="side-label">Click to show more options</label>
  <div id="bodyparts">
    <input id="head" type="checkbox">
    <label for="head">head</label>

    <input id="neck" type="checkbox">
    <label for="neck">neck (click for more options)</label>

    <div id="direction">
      <input id="left" type="checkbox">
      <label for="left">left</label>

      <input id="right" type="checkbox">
      <label for="right">right</label>

      <input id="both" type="checkbox">
      <label for="both">both</label>
    </div>

    <input id="middle-back" type="checkbox">
    <label for="middle-back">middle back</label>

    <input id="lower-back" type="checkbox">
    <label for="lower-back">lower back</label>
  </div>
</section>

Deselect all child elements when the parent checkbox is not selected

Answer №1

Answer №2

Similar questions

Can you provide step-by-step instructions on how to customize styles with MUI in my application?

What is the best way to arrange my crimson blocks to sit next to each other?

Disarrayed image in absolute position on my webpage

What is the best way to include attributes in an HTML element?

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

Retrieve the content from a textarea and insert it into a different textarea with additional text included

What is the best way to replicate the orange outline when focused?

Issue with jQuery.off when using a dynamic function name

Encountering null values in IE8/IE7 JavaScript code

Using jQuery to make hidden divs visible again

Using Rails and Stripe: Sending out a form and effectively managing errors with AJAX

Quantities with decimal points and units can be either negative or positive

Having trouble getting the jQuery/JS redirect button to function properly

Different approaches to transforming jQuery code into functional AngularJS code

Divs Stacked and Centered

Random Image Generator in Javascript with Links

The key up event in JQuery does not seem to be triggered when selecting the second option in the Select2 plugin's multi

Issue with aligning CSS in Internet Explorer 7

Retrieving data from Google Places API in JSON format

Clear all events from an HTML element and its descendants with TypeScript