jQuery addClass example

Change class name on click in jQuery

by mamounothman

HTML

<ul class="cat_list">
  <li>
    <input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
    <label for="1" class="selectit">1</label>
    <ul class="children">
      <li>
        <input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
        <label for="11" class="selectit">11</label>
        <ul class="children">
          <li>
            <input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
            <label for="111" class="selectit">111</label>
          </li>
          <li>
            <input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
            <label for="112" class="selectit">112</label>
          </li>
        </ul>
      </li>
      <li>
        <input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
        <label for="12" class="selectit">12</label>
      </li>
      <li>
        <input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
        <label for="13" class="selectit">13</label>
      </li>
      <li>
        <input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
        <label for="14" class="selectit">14</label>
      </li>
      <li>
        <input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
        <label for="15" class="selectit">15</label>
            <ul class="children">
              <li>
                <input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
                <label for="151" class="selectit">151</label>
              </li>
              <li>
                <input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
                <label for="152" class="selectit">152</label>
              </li>
            </ul>
      </li>
    </ul>
  </li>
</ul>

<br/><br/>
<input type='text' id='textbx' value=''/>

CSS

label{cursor:pointer}

JavaScript

handleChildren = function() {
  var $checkbox = $(this);
  var $checkboxChildren = $checkbox.parent().find(".children input[type=checkbox]");
  $checkboxChildren.each(function() {
    if ($checkbox.is(":checked")) {
      $(this).prop("checked", "checked");
    } else {
      $(this).removeProp("checked");
    }
  });
};
handleParents = function(current) {
  var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
  if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
    $parent.prop("checked", "checked");
  } else {
    $parent.removeProp("checked");
  }
  handleParents($parent);
}

$('ul.cat_list').find('input[type=checkbox]').each(function(index, input) {
  $(input).on('click', handleChildren);
  $(input).on('click', function() {
    handleParents(this);
  });
});


$('.chkbx').change(function(){
    var text = "";
    $('.chkbx:checked').each(function(){
        text += $(this).val()+',';
    });
    text = text.substring(0,text.length-1);
    
    $('#textbx').val(text);
});