The checkbox system is designed so that if all child checkboxes are chosen, the parent checkbox will automatically become selected as well

Question

The checkbox system is designed so that if all child checkboxes are chosen, the parent checkbox will automatically become selected as well

view image description hereLet's create a checkbox structure with some specific conditions:

When the parent checkbox is selected, all child checkboxes should automatically get selected.
If all child checkboxes are unselected, then the parent checkbox should also get unchecked automatically.
If any single child checkbox is selected, the parent checkbox should get selected as well.

This is how the structure should appear:

Below is my code. However, it doesn't seem to meet the second condition perfectly. The logic seems correct but there might be a syntax issue. Kindly point out the necessary changes or corrections needed. Thank you in advance!

<!DOCTYPE html>
<html>

<head>
    <title>jquery3</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="#"></script>
 . . .
    
</body>

</html>

javascript jquery html css bootstrap-4

Answer 1

Answer №1

To make selection easier, I suggest adding a class to both the group and child checkboxes. Your parent selector function looks solid, but here's how I would write it. The child selector function should dynamically update based on whether any boxes are checked or not by utilizing the .length property to count the number of checked child boxes. Check out this Jsfiddle for reference.

$(document).ready(function() {
  // Check/uncheck all siblings
  $('.selector input.parent-check').click(function() {
    $(this).closest("div.check-group").find(".child-check").prop("checked", this.checked);
  });

  // Check/uncheck parent based on children
  $('.selector input.child-check').click(function() {
    var numChecked = $(this).closest("div.check-group").find(".child-check:checked").length;
    $(this).closest("div.check-group").find(".parent-check").prop("checked", (numChecked > 0));
  });
});

Answer 2

To make selection easier, I suggest adding a class to both the group and child checkboxes. Your parent selector function looks solid, but here's how I would write it. The child selector function should dynamically update based on whether any boxes are checked or not by utilizing the .length property to count the number of checked child boxes. Check out this Jsfiddle for reference.

$(document).ready(function() {
  // Check/uncheck all siblings
  $('.selector input.parent-check').click(function() {
    $(this).closest("div.check-group").find(".child-check").prop("checked", this.checked);
  });

  // Check/uncheck parent based on children
  $('.selector input.child-check').click(function() {
    var numChecked = $(this).closest("div.check-group").find(".child-check:checked").length;
    $(this).closest("div.check-group").find(".parent-check").prop("checked", (numChecked > 0));
  });
});

Answer 3

Answer №2

You made two mistakes:

The line
```
var is_checked = $(checkbox).is(':checked');
```
did not return the correct value. You could have simply used checkbox.is(':checked'); instead of defining 'is_checked'.

Instead of using .removeAttr() in

$(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');

, you should have used .prop('checked', false);

Here is the corrected code:

$(document).ready(function() {
  $('.parchek').click(function() {
    $(this).parents().siblings("ul").find("input").prop('checked', this.checked);
  });

  $('.selecter').find('input').each(function(index, input) {
    $(this).on("change", function() {
      var checkbox = $(this);
      var is_checked = checkbox.is(':checked');

      if (is_checked) {
        $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
      } else {
        let checkboxes = $(this).parents("ul").find("input");
        
        if (allCheckBoxesUnChecked(checkboxes)) {
          $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', false);
        }
      }
    });
  });

  // helper function that checks if all checkboxes are unchecked
  function allCheckBoxesUnChecked(elems) {
    let allUnchecked = true;
    $.each(elems, function(ind, item) {
      if (item.checked) {
        allUnchecked = false;
        return;
      }
    });
    return allUnchecked;
  }
});

.col-md-3.mx-auto.my-3.d-block.px-0 {
  border: 1px solid;
  border-color: #eeeeee;
}

.col-md-3.mx-auto.my-3.d-block .header {
  background: linear-gradient(#f1f1f1, #fff);
  border-bottom: 1px solid #eeeeee;
  color: #616161;
  letter-spacing: 1px;
  padding-top: 2px;
  padding-left: 18%;
  font-family: Georgia;
  font-weight: bold;
  /* height: 9%; */
  padding-bottom: 2px;
}

.col-md-3.mx-auto.my-3.d-block .Drop-down {
  padding-top: 4%;
  padding-left: 6%;
}

.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
  background: #fff;
  border: 2px solid #f1f1f1;
  font-size: 15px;
  /* padding-left: 18%; */
  font-family: Georgia;
}

.col-md-3.mx-auto.my-3.d-block .selecter {
  padding-top: 4%;
  padding-left: 6%;
  color: #464f44;
  font-size: 15px;
  /* padding-left: 18%; */
  font-family: Georgia;
}

#submitbtn {
  margin-top: 4%;
  margin-left: 6%;
  margin-bottom: 4%;
  /* height: 23px; */
  width: 72px;
  background: linear-gradient(#fff, #f1f1f1);
  /* font-size: 13px; */
  font-family: Georgia;
}

.OU {
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>jquery3</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
...
... Remaining HTML code truncated for brevity ...
...
</body>
</html>

Answer 4

You made two mistakes:

The line
```
var is_checked = $(checkbox).is(':checked');
```
did not return the correct value. You could have simply used checkbox.is(':checked'); instead of defining 'is_checked'.

Instead of using .removeAttr() in

$(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');

, you should have used .prop('checked', false);

Here is the corrected code:

$(document).ready(function() {
  $('.parchek').click(function() {
    $(this).parents().siblings("ul").find("input").prop('checked', this.checked);
  });

  $('.selecter').find('input').each(function(index, input) {
    $(this).on("change", function() {
      var checkbox = $(this);
      var is_checked = checkbox.is(':checked');

      if (is_checked) {
        $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
      } else {
        let checkboxes = $(this).parents("ul").find("input");
        
        if (allCheckBoxesUnChecked(checkboxes)) {
          $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', false);
        }
      }
    });
  });

  // helper function that checks if all checkboxes are unchecked
  function allCheckBoxesUnChecked(elems) {
    let allUnchecked = true;
    $.each(elems, function(ind, item) {
      if (item.checked) {
        allUnchecked = false;
        return;
      }
    });
    return allUnchecked;
  }
});

.col-md-3.mx-auto.my-3.d-block.px-0 {
  border: 1px solid;
  border-color: #eeeeee;
}

.col-md-3.mx-auto.my-3.d-block .header {
  background: linear-gradient(#f1f1f1, #fff);
  border-bottom: 1px solid #eeeeee;
  color: #616161;
  letter-spacing: 1px;
  padding-top: 2px;
  padding-left: 18%;
  font-family: Georgia;
  font-weight: bold;
  /* height: 9%; */
  padding-bottom: 2px;
}

.col-md-3.mx-auto.my-3.d-block .Drop-down {
  padding-top: 4%;
  padding-left: 6%;
}

.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
  background: #fff;
  border: 2px solid #f1f1f1;
  font-size: 15px;
  /* padding-left: 18%; */
  font-family: Georgia;
}

.col-md-3.mx-auto.my-3.d-block .selecter {
  padding-top: 4%;
  padding-left: 6%;
  color: #464f44;
  font-size: 15px;
  /* padding-left: 18%; */
  font-family: Georgia;
}

#submitbtn {
  margin-top: 4%;
  margin-left: 6%;
  margin-bottom: 4%;
  /* height: 23px; */
  width: 72px;
  background: linear-gradient(#fff, #f1f1f1);
  /* font-size: 13px; */
  font-family: Georgia;
}

.OU {
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>jquery3</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
...
... Remaining HTML code truncated for brevity ...
...
</body>
</html>

The checkbox system is designed so that if all child checkboxes are chosen, the parent checkbox will automatically become selected as well

Answer №1

Answer №2

Similar questions

Exploring the Sidebar Navigation Features of Bootstrap 4

Designing HTML Emails Using Nested Tables

Limit access to a page only to designated users

Each time the web animation is utilized, it gets faster and faster

Finding the desired value from an option select in a JSON object is key

Angular material chips showcase a row of five chips

When a parent document is deleted, Mongoose automatically removes any references to child documents

Using a combination of jQuery and AJAX to send data via a form

What is the best way to display an additional component upon logging out in a React application that utilizes

Pass back the jQuery deferred object from the error section of an Ajax request

How to best handle dispatching two async thunk actions in Redux Toolkit when using TypeScript?

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

Efficiently storing multiple file fields in Django with the help of jQuery and Ajax

useEffect runs endlessly

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

What are the best practices for securely using JSON.stringify in JavaScript?

Neglecting the Outcome of Async/Await

Substitute the temporary text with an actual value in JavaScript/j

What is the method for setting the current time as the default in a time picker?

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js