如何选中另一个复选框的更改复选框？

Sanjay Rathod 发表于 Dev

桑杰·拉索德（Sanjay Rathod）

当用户在父级li中选中复选框时，我想选中一个复选框。

所以这是我的html代码。

<ul>
    <li class="parent3 child2" id="3">
        <span style="padding-left:60px;">
            <i aria-hidden="true" class="icon-minus"></i>
            Civil
        </span>
        <div>
            <label class="viewList">
                <input type="checkbox" value="49" name="view[]">
                View
            </label>
            <label class="downList">
                <input type="checkbox" value="49" name="down[]">
                Download
            </label>
            <label class="upList">
                <input type="checkbox" value="49" name="update[]">
                Update
            </label>
        </div>
        <ul class="submenu" style="display: block;">
            <li class=" child3" id="4">
                <span style="padding-left:80px;">test1</span>
                <div>
                    <label class="viewList">
                        <input type="checkbox" value="60" name="view[]">
                        View
                    </label>
                    <label class="downList">
                        <input type="checkbox" value="60" name="down[]">
                        Download
                    </label>
                    <label class="upList">
                        <input type="checkbox" value="60" name="update[]">
                        Update
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

现在我要选中子复选框的复选框。

所以我试过下面的代码。

$(document).ready(function(){
    $('.viewList input').change(function () {
        alert('hello')
        if ($(this).attr("checked")) {
            $(this).closest('li').children('.submenu .viewList input').prop( "checked", true );
            alert('hello')
        }
        // not checked
    }); 
});

这也是我尝试过的jsfiddle。

任何帮助将不胜感激。谢谢

阿罗克·帕特尔（Alok Patel）

您需要使用几个jQuery函数来实现相同的功能。例如parents()，find等...

您更新的代码应如下所示。

$(document).ready(function(){
    $('.viewList input').change(function () {
        if($(this).parents('li').size()>0) {
                var parentLi=$(this).parents('li');
            if(parentLi.find('ul').size()>0) {
                    var childInput=parentLi.find('ul').find('.viewList input');
                if($(this).is(":checked")){
                    childInput.prop('checked','checked');
                } else {
                    childInput.removeAttr('checked');
                }
            }
        }
        }); 
});

更新了jsFiddle链接：https ://jsfiddle.net/xf6Lfu0v/12/