jquery - JQuery：取消选中ul li中的子复选框

Question

我有这样的代码：

 <ul>  
     <li><input type="checkbox" level="child"  name="somename1" value="1" /> Child 1</li>
     <li><input type="checkbox" level="child"  name="somename2" value="2" /> Child 2 <br />
            <ul>
                <li><input type="checkbox" level="subchild" name="somename1" value="3" />Sub Child 1</li>
                <li><input type="checkbox" level="subchild" name="somename2" value="3" />Sub Child 2</li>
            </ul>
     </li>
     <li ><input type="checkbox" level="child"  name="somename3" value="3" /> Child 3</li>
 </ul>

和jQuery代码：

$('input[@type=checkbox][level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) {
          alert("checked");
        } else { //for click child to uncheck subchild
            alert("when unchecked");
            $(this).closest('ul > li').children('input[@type=checkbox][level="subchild"]').attr('checked', false);

        }
});

情况： child 2 + subchild1 + subchild2 被选中

问题：当我单击取消选中子 2 时，我想取消选中 subchild1 + subchild2，我上面的代码不起作用。我认为这与：

$(this).closest('ul > li').children('input[@type=checkbox [level="subchild"]').attr('checked', false);

任何帮助都会很棒。这是 JSfiddle：http: //jsfiddle.net/p324w/

Answer 1

$('input[type=checkbox][level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) {
          console.log("checked");
        } else { //for click child to uncheck subchild
            $(this).parent().find('input[type=checkbox][level="subchild"]').prop('checked', false);
        }
});

jsFiddle 示例

几点注意事项：

• 我不确定您为什么@在类型选择器中使用，但这是不必要的
• 您需要使用$(this).parent().find导航到 DOM 中的正确输入元素
• 使用.prop('checked', false)而不是.attr('checked', false).
• level不是有效的属性。如果您需要自定义属性，请使用data-*.

Answer 2

Working FIDDLE Demo

尝试这个：

$('input[type=checkbox][level="child"]').on('click', function () {
    // get checked status
    var checked = $(this).is(':checked');

    // go up the dom to the parent of checkbox (li)
    $(this).closest('li')

        // find all subchild checkboxes
        .find('input[type=checkbox][level="subchild"]')

        // make them as the parent checkbox (checked or not)
        .prop('checked', checked);
});