jquery在子/父<li>中选择/取消选择复选框

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

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

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

谢谢

Answer 1

在.parents() 上使用.children()（获取立即子级）而不是.find()（如下所示），例如：

(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

识别父级将是一个特定的类，如“父级”

然后

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

很简单

Answer 3

怎么样：

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

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

Answer 4

您可以使用此代码来允许复选框显示/隐藏 DIV（或在本例中为引导组）内的子元素或元素。

第 1 步 - 将“开关”类应用到复选框 确保已设置复选框 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>