Parent and child checkboxes

Question

  <div id="customerServices">
        <input id="s9" type="checkbox" /> Parent element<br/>
            <input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
            <input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
        <br/><br/><br/>

         <input id="s10" type="checkbox" /> Parent element2<br/>
            <input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
            <input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
          <br/><br/><br/>

           <input id="s101" type="checkbox" /> Parent element3<br/>
           <input id="s102" type="checkbox" /> Parent element4<br/>
     </div>

There are some checkboxes on a page. I have need:

1. Check all childs if parent is checked.
2. Uncheck parent if all childs are unchecked.
3. Check parent if at least one child is checked.

This is some some code, but it's doesn't work

  $('input[type=checkbox]').change(function() {
        var id = $(this).attr('id');
        var children = $('.parent-' + id);


        //Is this a child
        if (children.length)
        {
           //Is it checked
             if ($(this).is(':checked'))
             {
                 //Find the parent
                 var className = $(this).attr('class');
                 var pId = className.replace("parent-","");

                 //If the parent is not checked, then check this parent
                 if (!$(pId).is(':checked'))
                     $(pId).attr('checked','checked');
             }

            //Is it NOT checked
            else{
                //Do other childs are not checked too?
               //var className2 = $(this).attr('class');
                //$(className2)
            }
        }
        //If this is a parent, then check all childs
        esle{ 
            children.attr('checked', $(this).attr('checked'));

        }


     });

Answer 1

Here I wrote code for you:

var checkboxHandlerObj = {
  init: function() {
    $('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
    $('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked);
  },

  parentClicked: function() {
    if ($(this).attr('checked')) {
      $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').attr('checked', 'checked');
    } else {
      $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').removeAttr('checked');
    }
  },

  childClicked: function() {
    var temp = $(this).attr('class').split('-');
    var parentId = temp[1];

    if ($(this).attr('checked')) {
      $('#' + parentId).attr('checked', 'checked');
    } else {
      var atLeastOneEnabled = false;
      $('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]').each(function() {
        if ($(this).attr('checked')) {
          atLeastOneEnabled = true;
        }
      });
      if (!atLeastOneEnabled) {
        $('#' + parentId).removeAttr('checked');
      }
    }
  }

};

checkboxHandlerObj.init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="customerServices">
  <input id="s9" class="parent" type="checkbox" /> Parent element<br/>
  <input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
  <input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
  <br/><br/><br/>

  <input id="s10" class="parent" type="checkbox" /> Parent element2<br/>
  <input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
  <input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
  <br/><br/><br/>

  <input id="s101" class="parent" type="checkbox" /> Parent element3<br/>
  <input id="s102" class="parent" type="checkbox" /> Parent element4<br/>
</div>

From - http://jsfiddle.net/PUWZX/4/