使用jQuery選中父復選框

Question

基本上，我試圖編寫一個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()......

       }
    }
 }

Answer 1

我將在您的HTML中刪除內聯JavaScript，並使用jQuery綁定來綁定check事件：

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

這會將您要查找的事件自動綁定到liChild類的任何輸入，而無需所有這些onclicks。

Answer 2

根據您的結構，這將起作用：

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

要么

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