Question

我有一个脚本可以检查和取消选中嵌套列表中的所有子复选框。我现在正试图得到它所以我可以检查一个低级复选框，它将检查所有父母只回到最高级别。 Here is a JSFiddle

<ul class="tree" id="tree">

    <li><input type="checkbox" name="account_settings" value="yes">Account Settings <!-- AND SHOULD CHECK HERE -->
        <ul>
            <li><input type="checkbox" name="one" value="one">AS One</li>
            <li><input type="checkbox" name="two" value="two">AS Two</li>
            <li><input type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles <!-- SHOULD CHECK HERE -->
                <ul>
                    <li><input type="checkbox" name="user_role" value="add">Add</li>
                    <li><input type="checkbox" name="user_role" value="delete">Delete</li> <!-- CHECK HERE -->
                </ul>
            </li>
        </ul>
    </li>

    <li><input type="checkbox" name="rl_module" value="yes">RL Module</li>

    <li><input type="checkbox" name="rl_module" value="yes">Accounting
        <ul>
            <li><input type="checkbox" name="vat" value="yes">VAT</li>
            <li><input type="checkbox" name="bank_account" value="yes">Banking
                <ul>
                    <li><input type="checkbox" name="view" value="yes">View</li>
                    <li><input type="checkbox" name="crud" value="yes">CRUD</li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

和相应的javascript：

$('input[type=checkbox]').click(function(){

    // if is checked
    if($(this).is(':checked')){

        // check all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', true);

        // check all parents
        $(this).parent().prev().prop('checked', true);

    } else {

        // uncheck all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', false);

    }

});

Answer 1

看起来你想要这样的东西

$('input[type=checkbox]').click(function(){
    if(this.checked){ // if checked - check all parent checkboxes
        $(this).parents('li').children('input[type=checkbox]').prop('checked',true);
    }
    // children checkboxes depend on current checkbox
    $(this).parent().find('input[type=checkbox]').prop('checked',this.checked); 
});

FIDDLE

如果你想检查上下层次结构 - 你可以这样做

$('input[type=checkbox]').click(function(){
    // children checkboxes depend on current checkbox
    $(this).next().find('input[type=checkbox]').prop('checked',this.checked);
    // go up the hierarchy - and check/uncheck depending on number of children checked/unchecked
    $(this).parents('ul').prev('input[type=checkbox]').prop('checked',function(){
        return $(this).next().find(':checked').length;
    });
});

FIDDLE

Answer 2

这应该这样做：

$('input[type=checkbox]').click(function () {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
        if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
});

<强> jsFiddle example

最新更新处理层次结构和兄弟姐妹。

Answer 3

只需使用jquery.parents()即可。它有点类似于find（），除了它搜索所有父母。这样的事情可能接近你想要的东西：

$(this).parents('li').each(function() {
  $(this).children('input').prop('checked', true);
});

有关详细信息，请参阅http://api.jquery.com/parents/。

编辑：好的，这是一个有效的解决方案：

http://jsfiddle.net/3y3Pb/12/

EDIT2：这里有一个更简化的解决方案：

http://jsfiddle.net/3y3Pb/14/

Answer 4

有一个JSFiddle：http://jsfiddle.net/3y3Pb/16/

我建议在复选框中添加父属性。此父属性将引用父复选框的id，以便您不必担心结构更改：

$('input type=[checkbox]').change(function () {
    $('#' + $(this).attr('parent')).prop('checked', this.checked);
});

例如：

<input type="checkbox" name="account_settings" value="yes" id="as">Account Settings
    <ul>
        <li><input type="checkbox" name="one" value="one" parent="as" id="one">AS One</li>

Answer 5

您也可以使用prevAll() 我有同样的问题。在我的情况下，li中有多个带标签的复选框，目标上方的每个复选框都有类parent（以js生成）

$(this).parents().prevAll('input:checkbox.parent').each(function () {
                       $(this).attr('checked', true);
                   });

Jquery检查嵌套ul li中的父复选框

5 个答案: