CODEWITHSUNDEEP
javascriptjquery
Alexandre
Alexandre

Reputation: 13308

Parent and child checkboxes

  <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'));

        }


     });

Upvotes: 3

Views: 7503

Answers (3)

CoolEsh
CoolEsh

Reputation: 3154

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/

Upvotes: 6

erickb
erickb

Reputation: 6309

Try this, http://jsfiddle.net/erick/dd6Qr/

// 1. Check all  childs  if  parent is checked
$("#s9").change(function(){
    if($(this).is(':checked')) {
        var cls = '.parent-' + $(this).attr('id');
        $(cls).attr('checked', true);  
    }
});

$('input[class*="parent"]').change(function(){
    var cls = '.' + $(this).attr('class') + ':checked';
    var len = $(cls).length;
    var parent_id = '#' + $(this).attr('class').split('-')[1];

    // 3. Check parent if at least one child is checked
    if(len) {
        $(parent_id).attr('checked', true);
    } else {
        // 2. Uncheck parent if all childs are unchecked.
        $(parent_id).attr('checked', false);
    }
});

Upvotes: 0

Adam Lukaszczyk
Adam Lukaszczyk

Reputation: 4926

I haven't check all your script, but tell me first if you put this code into

$(document).ready(function() {
....
});

and if jquery works on your page?

Upvotes: 0

Related Questions