Question

我有以下

<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>

现在我的JQuery函数：

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

取消选中子项时，如何取消选择ONLY（全部）父复选框

例如：点击“sub sub 2”复选框 - ＆gt;它也应该取消选中“sub 2”和“parent 1”复选框。

感谢

Answer 1

使用.children()（以获取直接子项）代替.find()上的.parents()（在下面的任何地方），例如：

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

由于您传递的是布尔值，因此您也可以直接使用.checked属性。

You can give it a try here，获得相同效果的更传统方法如下所示：

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

You can give that version a try here

Answer 2

怎么样：

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

更新。这是错误的，请参阅Nick的解决方案。

Answer 3

确定父母将像“父母”

这样的特定类

然后

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

非常简单

Answer 4

您可以使用此代码来允许复选框显示/隐藏childer元素或不包含DIV的元素（或者在本例中为bootstrap组）。

步骤＃1 - 将类'switch'应用于复选框确保已设置复选框ID

步骤＃2 - 对于要隐藏/切换的元素，添加具有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 5

<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>

刚为项目完成了这个算法，我想我会在堆栈流程上分享它

基本上，如果您检查父项，则选择所有子项，当您取消选中子项时，将取消选中与其关联的所有父项，因为只有在检查了所有子项时才能保持父项检查

确保所有复选框都在li范围内且所有li都在ul范围内，否则这将无效

示例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>

jquery选择/取消选中children / parent <li> </li>中的复选框

5 个答案: