jQuery选择/取消选择子代/父代中的复选框<li>

Question

I have the following

<ul>
   <li>Main
    <ul>
        <li><input type="checkbox" onclick="$.SelectChildren(this);" /> parent 1
           <ul>
               <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub 1</li>
               <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub 2
                  <ul>
                     <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub sub 2</li>
                     <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub sub 3</li>
                  </ul>
                </li>
            </ul> 
        </li>
        <li><input type="checkbox" onclick="$.SelectChildren(this);" />parent 2</li>
    </ul>
   </li>
</ul>

Now for my JQuery function:

(function ($) {
    $.SelectChildren = function (element) {
        if ($(element).is(':checked')) {
            $(element).parent().find(':checkbox').attr('checked', true);
        }
        else {
            $(element).parent().find(':checkbox').attr('checked', false);
        }
    }
})(jQuery);

how would I unselect ONLY (all)parent checkboxes when un-checking a child

for example: when clicked "sub sub 2" checkbox -> it should uncheck "sub 2" and "parent 1" checkboxes as well.

thanks

Answer 1

Use .children() (to get immediate children) instead of .find() (which looks everywhere below) on the .parents() , for example:

(function ($) {
  $.SelectChildren = function (element) {
    $(element).parents().children(':checkbox').attr('checked', element.checked);
  };
})(jQuery);

Since you're passing a boolean, you can just use the .checked property directly as well.

You can give it a try here , the more traditional approach to get the same effect would look like this:

$(function() {
  $(":checkbox").change(function () {
    $(this).parents().children(':checkbox').attr('checked', this.checked);
  });
});

You can give that version a try here .

Answer 2

You can use this code to allow a checkbox to show/hide childer elements OR elements withint a DIV (or in this case a bootstrap group).

Step #1 - apply the class 'switch' to the checkbox Make sure the checkbox id is set

Step #2 - for the element you want to hide/toggle add the class with chcekbox ID

// -------------------------
// Checkbox to toggle related input fields
// Checkbox control class = switch
// -------------------------
$('.switch').each(function() {
    var tItems = $(this).attr('id');
    $('.' + tItems).hide();
});
// Toggle elements
// <div class="control-group applied_before <-- checkbox ID">
$('.switch').change(function () {
    var tItems = $(this).attr('id');
    $('.' + tItems).toggle();
});
// -------------------------
// -------------------------


<fieldset>
    <legend>Criminal History</legend>   
    <div class="control-group">
        <input type="checkbox" name="criminal_offender" id="criminal_offender" class="switch" />
        <label>criminal_offender</label>
    </div>

    <div class="control-group criminal_offender">
        <label>criminal_offense</label>
        <input type="text" name="criminal_offense" id="criminal_offense" />
    </div>

    <div class="control-group criminal_offender">
        <label>criminal_st_code</label>
        <input type="text" name="criminal_st_code" id="criminal_st_code" />
    </div>

    <div class="control-group criminal_offender">
        <label>criminal_date</label>
        <input type="text" name="criminal_date" id="criminal_date" />
    </div>
</fieldset>

Answer 3

<script>  

            var checkParent  = function(ref) {
                return $(ref).parent().parent().parent().children().first();

            }

           $('input[type="checkbox"]').click(function(){
                if(this.checked){
                    $(this).parent().children().find('input[type="checkbox"]').attr('checked', true);
                }

                else {
                    var a = checkParent(this);
                    while(a.length > 0 && a.prop("tagName") == "INPUT" )
                     {
                        a.attr("checked", false);
                        a = checkParent(a);

                    }

                }
           });

        </script>  

Just completed this algorithm for a project and thought i'll share it on stack flow

Basically, if you check a parent, all the children are selected and when you uncheck a child, all the parents associated with it will be unnchecked because a Parent can remain checked only if all the children are checked

Make sure all the checkboxes are within li and all the li are within ul otherwise this won't work

sample html

<ul id="a">
        <ul id="b">
            <li id="parentli"><input type="checkbox" id="parent"> Parent
                <ul id="c">
                     <li><input type="checkbox" id="aa">Child 1</li>
                     <li><input type="checkbox" id="ab">Child 2
                        <ul id="d">
                             <li><input type="checkbox" id="aba">Child 2-1</li>
                        </ul>
                     </li>
                     <li><input type="checkbox" id="ac">Child 3</li>
                </ul>
            </li>
        </ul>

   </ul>

Answer 4

How about:

$(element).parents(":checkbox").attr('checked', false);

UPDATE. This is wrong, see Nick's solution.

Answer 5

Identify the parent will a specific class like "parent"

Then

$(".parent").attr("checked", false);

Very Simple