4

Check all checked boxes when you click the parent check box

 2 years ago
source link: https://www.codesd.com/item/check-all-checked-boxes-when-you-click-the-parent-check-box.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Check all checked boxes when you click the parent check box

advertisements

I have Parent1 and check box when i click on Parent1 check box all the child belongs to parent1 should to checked and parent1 along with the checkbox should fadeout and again if i uncheck on any one of child the parent1 along with the checkbox should reappear and the parent and child values are coming from database and they are in for each loop i.e first parent for each loop inside that child for each loop.

My code is in http://jsfiddle.net/mrc4N/3/

<div class="middle-right">
<ul class="mid-right-list">
<li><span id="Parent1a">+ Parent1<input name="parent" class="pc-box" type="checkbox"></span>
        <ul class="pa rplist">
<li value="1" class="parent1">- Child   1.1 <input class="cc-box" name="child" type="checkbox"></li>
<li value="2" class="parent1">- Child   1.2 <input class="cc-box" name="child" type="checkbox"></li>
<li value="3" class="parent1">- Child   1.3 <input class="cc-box" name="child" type="checkbox"></li>
            </ul>
              </li>
<li><span id="Parent2a">+ Parent2<input name="parent" class="pc-box" type="checkbox"></span>
    <ul class="pb rplist">
<li value="1" class="parent2 c1">- Child 2.1 <input class="cc-box" name="child" type="checkbox"></li>
<li value="2" class="parent2 c2">-Child 2.2 <input class="cc-box" name="child" type="checkbox"></li>
<li value="3" class="parent2 c3">- Child    2.3 <input class="cc-box" name="child" type="checkbox"></li>
    </ul>
</li>
<li><span id="Parent3a">+ Parent3<input name="parent" class="pc-box" type="checkbox"></span>
<ul class="pc rplist">
<li value="1" class="parent3 c1">-Child 3.1 <input class="cc-box" name="child" type="checkbox"></li>
<li value="2" class="parent3 c2">- Child    3.2 <input class="cc-box" name="child" type="checkbox"></li>
    <li value="3" class="parent3 c3">- Child    3.3 <input class="cc-box" name="child" type="checkbox"></li>
    </ul>
</li>
</ul>
</div>

Thanks in advance


"when i click on Parent1 check box all the child belongs to parent1 should to checked and parent1 along with the checkbox should fadeout and again if i uncheck on any one of child the parent1 along with the checkbox should reappear"

The following is one way to do that:

$(document).ready(function() {
    $(".pc-box").click(function() {
        if (this.checked) {
            $(this).closest("li").find(".cc-box").prop("checked", true);
            $(this).parent().fadeOut();
        }
    });
    $(".cc-box").click(function() {
        if (!this.checked)
            $(this).closest("ul").prev().fadeIn().find(".pc-box").prop("checked", false);
    });
});

Demo: http://jsfiddle.net/mrc4N/4/

"and the parent and child values are coming from database and they are in for each loop"

I don't understand how that information is relevant to what you are asking, so I'm going to go ahead and ignore it.

Documentation for all of the jQuery methods I've used is available at the jQuery website.

Homework for you: look up every jQuery method used in my code. And do some jQuery tutorials.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK