Multiselect Hierarchy checkbox

by aybalasubramanian

HTML

<div class="parent clearLeft floatLeft">
  <input type="checkbox" class="clearLeft floatLeft">
  <div  class="clearLeft floatLeft">
    <input type="checkbox" class="clearLeft floatLeft">
    <input type="checkbox" class="clearLeft floatLeft">
    <div class="clearLeft floatLeft">
      <input type="checkbox" class="clearLeft floatLeft">
      <div class="clearLeft floatLeft">
        <input type="checkbox" class="clearLeft floatLeft">
        <input type="checkbox" class="clearLeft floatLeft">
        <input type="checkbox" class="clearLeft floatLeft">
      </div>
      <input type="checkbox" class="clearLeft floatLeft">
    </div>
  </div>
  <input type="checkbox" class="clearLeft floatLeft">
  <div class="clearLeft floatLeft">
    <input type="checkbox" class="clearLeft floatLeft">
    <input type="checkbox" class="clearLeft floatLeft">
  </div>
</div>

CSS

.parent div{margin-left:25px;}
.clearLeft{clear:left;}
.floatLeft{float:left;}

JavaScript

$('input').change(function(){
	var status = false;
  $(this).next().find('input').prop('checked', this.checked); 
 	status = ($(this).parent().find('> input').not(':checked').length === 0);
  $(this).parent().prev().prop('checked', status);
  console.log(status)
  if(status){
  		$(this).parent().prev().trigger("change");
  }
  else{
  	$(this).parents().prev().prop('checked', false);
  }
});