Select all child checkboxes, checked them and save their value

user_9134744 0
Viewed 4507

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?

html jquery javascript
4 Answers

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>

user_41149070

try this:

$(function () {
    $('input:checkbox.main-checkbox').click(function () {
        var array = [];
        var parent = $(this).closest('.main-parent');
        //check or uncheck sub-checkbox
        $(parent).find('.sub-checkbox').prop("checked", $(this).prop("checked"))
        //push checked sub-checkbox value to array
        $(parent).find('.sub-checkbox:checked').each(function () {
            array.push($(this).val());
        })
    });
})
user_107687250

The code in this fiddle allows you to check all .sub-checkbox-classes by clicking on the main-checkbox. All the values are pushed to an array (or erased if unchecked).

https://jsfiddle.net/vs9pb1xu/3/

user_97512220 
$('.main-checkbox').change(function () {

       var array=[];

        $(this).siblings().find('input').each(function(){
            $(this).trigger('click'); 
            if($('.main-checkbox').is(':checked')){
                array.push($(this).val());
            }
        });
        console.log('>>>'+array);
});
user_77506260
Related