Check all checkboxes if checked on parent checkbox

Question

I have Parent1 and the checkbox, when I click on the checkbox Parent1, all children belong to parent1, they must be checked, and parent1 with this checkbox should fade out again if I uncheck at least one of the parent1 checkboxes with this checkmark and parent and child values ​​come from the database, and they are intended for each cycle, i.e. the first parent for each cycle inside this child for each cycle.

My code is at 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

Answer 1

", Parent1, 1, , parent1 , - , 1 "

:

$(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);
    });
});

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

", , "

, , , .

jQuery, , - jQuery.

: jQuery, . jQuery tutorials.

Answer 2

- :

$('[type="checkbox"][name="parent"]').click(function(){
    $(this).parent().next('ul').find('li input').prop('checked',this.checked);
});

Answer 3

, ( pc-box), .

li, , check ,

//dom ready handler
jQuery(function () {
    //change handler for parent checkboxes
    $('.pc-box').change(function () {
        //update the checked status of all child checkeboxes in the same li
        $(this).closest('li').find('ul input').prop('checked', this.checked)
    })
})

: Fiddle

• class-selector -
• ()
• () - li, li
• find () - finds child flags in the sameli
• . prop () - change the checked property

Answer 4

Try this job perfectly:

$('[type="checkbox"][name="parent"]').on("click", function() {
  var all = $(this);
  $('input:checkbox').each(function() {
       $(this).prop("checked", all.prop("checked"));
  });
});