Select all child checkboxes, checked them and save their value

Question

I have nestable list with checkboxes and I need to work that check parent checkbox make all child checked and save children values into array.

I already figure out checking of all child checkboxes, when parent is checked? But I am not able to save their values at the same time.

HTML

<ul>
    <li class="main-parent">                                 
        <input class="main-checkbox" type="checkbox" value="id">   
        <ul>
            <li>
                <input class="sub-checkbox" type="checkbox" value="1">
            </li>
            <li>
                <input class="sub-checkbox" type="checkbox" value="2">
            </li>
            <li>
                <input class="sub-checkbox" type="checkbox" value="3">
            </li>
         </ul>
     </li>
</ul>

JQuery

$('input:checkbox').change(function () {
    var array=[];
    if(type === "main-checkbox") {
        var parent = $(this).closest('.dd-item');

        if('$(parent).find('.sub-checkbox').is(":checked")) {
         array.push($(parent).find('.sub-checkbox').prop('checked',this.checked).val());
        }
    }
});

This one return empty array and nothing is saved. Is possible to do it somehow like that?

Answer 1

With Pure JavaScript, the approach would be as follows:

1. Use querySelector to retrieve the main check-box and add a click listener which runs a function say, toggleCheck().
2. Use querySelectorAll to retrieve all the child check-boxes and assign them to a variable say, children.
3. You can then use the forEach() method to toggle each checkbox inside the children variable whenever the main checkbox is click.
4. Finally, add an if statement to the function that will push any child checkbox value to your array if it is checked and return it.

---

Check and run the following Code Snippet for a practical example of what I described above:

var main = document.querySelector(".main-checkbox");
var children = document.querySelectorAll(".sub-checkbox");

function toggleCheck() {
  var array=[];
  children.forEach(child => {
    child.checked = child.checked == true ? false : true

    if (child.checked == true) {
      array.push(child.value);
    }
  })

  console.log(array);
  return array;
}

main.addEventListener("click", toggleCheck);

<ul>
  <li class="main-parent">                                 
<input class="main-checkbox" type="checkbox" value="id">   
<ul>
  <li><input class="sub-checkbox" type="checkbox" value="1"></li>
  <li><input class="sub-checkbox" type="checkbox" value="2"></li>
  <li><input class="sub-checkbox" type="checkbox" value="3"></li>
</ul>
  </li>
</ul>