Wednesday, July 8, 2015

jQuery- All child checkbox checked on checked in jquery


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var nocon = jQuery.noConflict();
nocon(document).ready(function(){

  nocon(".chk").click(function(ev) {

    nocon(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
        ev.stopImmediatePropagation();
  });
});
</script>

<ul><li><input type="checkbox" class="chk"><a href="">1</a>
   <ul>
   <li>
   <input type="checkbox"class="chk"><a href="">2_1</a>
                       <ul>
                       <li><input type="checkbox" class="chk"><a href="">3_1</a></li>
                       <li><input type="checkbox" class="chk"><a href="">3_2</a></li>
                       </ul>
                   
                      </li>
                    <li>
                      <input type="checkbox"class="chk"><a href="">2_2</a>
                       <ul>
                       <li><input type="checkbox" class="chk"><a href="">3_3</a></li>
                       <li><input type="checkbox" class="chk"><a href="">3_4</a></li>
                       </ul>
                   
                      </li>
                      </ul>
                      </li>
        <li><input type="checkbox" class="chk"><a href="">1</a>
   <ul>
   <li>
   <input type="checkbox"class="chk"><a href="">2_1</a>
                       <ul>
                       <li><input type="checkbox" class="chk"><a href="">3_1</a></li>
                       <li><input type="checkbox" class="chk"><a href="">3_2</a></li>
                       </ul>
                   
                      </li>
                    <li>
                      <input type="checkbox"class="chk"><a href="">2_2</a>
                       <ul>
                       <li><input type="checkbox" class="chk"><a href="">3_3</a></li>
                       <li><input type="checkbox" class="chk"><a href="">3_4</a></li>
                       </ul>
                   
                      </li>
                      </ul>
                      </li>           
                   
                      </ul>

No comments :

Post a Comment