使用 jQuery 检查父复选框答案

【问题标题】：Check the parent checkbox with jQuery使用 jQuery 检查父复选框
【发布时间】：2010-01-22 17:39:58
【问题描述】：

基本上我正在尝试编写一个 js 函数，如果我选中一个子复选框，父复选框也会检查，如果尚未选中的话。我在这里使用 jquery 是我的 html：

      <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
            <li style="margin: 0 0 5px 0;">
                <input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1
                <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
                    </li>
                </ul>
            </li>

            <li style="margin: 0 0 5px 0;">
                <input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2
                <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
                    </li>
                </ul>
            </li>
</ul>

JS 函数

function checkParent(child){

if (child != null) {

    // if child is checked we need to check the parent category       
    if (child.checked) {
    // get the parent checkbox and check it if not check....need help here....
           $(child).parent().parent().parent()......

       }
    }
 }

【问题讨论】：

为什么在尝试检查父复选框时设置css颜色？这只是为了测试选择器是否有效吗？
您还需要更新您的输入控件。您应该在其中包含属性 type="checkbox" 。如果没有这个，大多数浏览器将无法正常工作。例如，FF3 将您当前的标记显示为所有文本框，而不是复选框。
哎呀，对不起，我只是做了一个简单的例子，而不是复制和粘贴我所有的代码......我在我的实际代码中有类型:)

标签： javascript jquery html

【解决方案1】：

我会删除 HTML 中的内联 javascript 并使用 jQuery 绑定来绑定检查事件：

$(document).ready(function() {
    $('input.liChild').change(function() {
        if ($(this).is(':checked')) {
            $(this).closest('ul').siblings('input:checkbox').attr('checked', true);
        }
    });
});

这将自动将您要查找的事件绑定到任何具有类 liChild 的输入，而无需所有这些 onclick。

【讨论】：

我认为你想要最亲近的人而不是父母。 Parent 只会向上查找，而最接近的会继续查找，直到找到选择器。
Closest 或 Parents 会起作用，因为 Parents 有祖先，但 Parent 只是获取父级，在这种情况下还不够高。不过这样安排是个好主意。
如果你升级到新的 jQuery 1.4，你可以使用 $(this).parentsUntil('.liParent').attr('checked', true) （假设基于示例标记父复选框有类 liParent...

【解决方案2】：

这将根据您的结构起作用：

$(child).parent().parent().prev().attr('checked', true);

或

$(child).closest('ul').prev().attr('checked', true);;

【讨论】：