CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Yohan Blake
Yohan Blake

Reputation: 1318

How to check parent when all children checkboxes are checked

I have a rather different HTML structure to other questions similar to this on SO. I want to make the parent checkbox checked when all children checkboxes are checked. I have a JSFiddle where I have added my rather long HTML code. What am I doing wrong in the Jquery? This is my jquery: 

$('li :checkbox').on('click', function() {
      var $chk = $(this),
        $container = $chk.closest('td,li');
      if (!$container.hasClass('list-group-item')) {
        $container.find(':checkbox').not(this).prop('checked', this.checked)
      }
      do{
        $ul = $container.parent();
        $parent = $ul.siblings(':checkbox');
        if($chk.is(':checked')){
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $container = $chk.closest('td,li');
    } while($ul.is(':not(.someclass)'));
    });

PS: The parent/child relationship in the bottom half of the HTML structure don't work well coz of some unclosed tags. But the first few parent/children are working

Upvotes: 1

Views: 2305

Answers (2)

Romina
Romina

Reputation: 1

Because i did not find a way any where else i tried with trial and error on the example of @Script47 And got it to work with that:

        var child = document.getElementById('test-sub-items'), parentCheckbox = document.getElementById('test-main');

    child.addEventListener('click', function() {
      for (var i = 0; i < child.children.length; i++) {
        if (child.children[i].firstElementChild.checked == true)
          parentCheckbox.checked = true;
        else
          parentCheckbox.checked = false;

      }
    });
<ul>
<li>
<input type="checkbox" id="test-main"> Essen
</li>
    <ul id="test-sub-items">
      <li><input type="checkbox"> Apfel</li>
      <li><input type="checkbox"> Birne </li>
      <li><input type="checkbox"> Cadmium</li>
    </ul>

<li><input type="checkbox">Bier</li>
<li><input type="checkbox">C hohes</li>
</ul>

Upvotes: 0

Script47
Script47

Reputation: 14550

The example below should help you understand and give you a way to accomplish what you want.

Explanation

What you should do is give each sub-category an ID which can be used to iterate through the children so the only those checkboxes can be checked and not all of them.

HTML

<ul>
  <li>
    <input type="checkbox" id="test-main"> test
  </li>
  <ul id="test-sub-items">
    <li>
      <input type="checkbox"> test
    </li>
    <li>
      <input type="checkbox"> Something
    </li>
    <li>
      <input type="checkbox"> Another Thing</li>
  </ul>

  <li>
    <input type="checkbox"> Blah
  </li>
  <li>
    <input type="checkbox"> blah
  </li>
</ul>

JavaScript

var parent = document.getElementById('test-sub-items'),
  parentCheckbox = document.getElementById('test-main');

parentCheckbox.addEventListener('click', function () {
  for (var i = 0; i < parent.children.length; i++) {
    if (parentCheckbox.checked == true)
      parent.children[i].firstElementChild.checked = true;
    else
      parent.children[i].firstElementChild.checked = false;

  }
});

This is simply an example for you to try and incorporate in to your code.

Update

After reading your comment I quickly came up with this function which should help:

function areAllChecked() 
{
  for (var i = 0; i < parent.children.length; i++) {
    if (parentCheckbox.checked == false)
      return false;
  }
  return true;
}

Check the console in the live example for the updated version.

Live Example

JSFiddle

JSFiddle (Update 1)

Reading Material

children

firstElementChild

Upvotes: 1

Related Questions