CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Manoj Kumar
Manoj Kumar

Reputation: 107

On check Child Checkbox checks Parent Checkbox

I managed to do on checking Parent Checkbox to check all Child Checkboxes but i dont know how to do on checking any child checkbox to check the parent checkbox and if all the child checkboxes are unchecked then the Parent checkbox needs to be unchecked. 1. I did on checking Parent Checkbox to check all Child Checkboxes (completed) 2. on checking any child checkbox also checks parent checkbox (not complete) 3. if all the child checkboxes are unchecked then the Parent checkbox unchecks(not complete). This is how far i got:

$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li style="display: block;"><input type="checkbox">Lead1 <br>
	<ul>
																				
		<li style="display: block;"><input type="checkbox"> All Leads <br></li>

		<li style="display: block;"><input type="checkbox"> Recent Leads <br></li>

		<li style="display: block;"><input type="checkbox"> My Leads <br></li>

	</ul>

</li>
<li style="display: block;"><input type="checkbox">Lead2 <br>
	<ul>
																				
		<li style="display: block;"><input type="checkbox"> first <br></li>

		<li style="display: block;"><input type="checkbox"> second <br></li>

		<li style="display: block;"><input type="checkbox"> third <br></li>

	</ul>

</li>

Please Help me to solve this as i am new to jquery and js.

Upvotes: 0

Views: 3277

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Add a class parent to the parent li and then do it like following.

$("input[type='checkbox']").change(function () {
    var ul = $(this).closest('ul');

    var checked = ul.find('input[type="checkbox"]:checked').length > 0;
        
    $(this).closest('.parent').find('input[type="checkbox"]').first().prop('checked', checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent" style="display: block;">
    <input type="checkbox">Lead1 <br>
    <ul>

        <li style="display: block;"><input type="checkbox"> All Leads <br></li>

        <li style="display: block;"><input type="checkbox"> Recent Leads <br></li>

        <li style="display: block;"><input type="checkbox"> My Leads <br></li>

    </ul>

</li>
<li class="parent" style="display: block;">
    <input type="checkbox">Lead2 <br>
    <ul>

        <li style="display: block;"><input type="checkbox"> first <br></li>

        <li style="display: block;"><input type="checkbox"> second <br></li>

        <li style="display: block;"><input type="checkbox"> third <br></li>

    </ul>
</li>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can have another handler which will check whether any checkbox in the same level is checked if so check the parent checkbox

$(function() {
  $("li:has(li) > input[type='checkbox']").change(function() {
    $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  });
  $("input[type='checkbox'] ~ ul input[type='checkbox']").change(function() {
    $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li style="display: block;">
    <input type="checkbox">Lead1
    <br>
    <ul>

      <li style="display: block;">
        <input type="checkbox">All Leads
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">Recent Leads
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">My Leads
        <br>
      </li>

    </ul>

  </li>
  <li style="display: block;">
    <input type="checkbox">Lead2
    <br>
    <ul>

      <li style="display: block;">
        <input type="checkbox">first
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">second
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">third
        <br>
      </li>

    </ul>

  </li>
</ul>

Upvotes: 4

Related Questions