JQuery：取消选中ul li中的子复选框答案

【问题标题】：JQuery: uncheck subchild checkbox inside ul liJQuery：取消选中ul li中的子复选框
【发布时间】：2013-05-21 23:57:16
【问题描述】：

我有这样的代码：

 <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);

        }
});

情况：孩子2 + subchild1 + subchild2被勾选

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

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

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

【问题讨论】：

标签： jquery checkbox

【解决方案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 example

几点说明：

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

【讨论】：

@ used 在属性等于选择器的语法中是必需的，但在 jQuery 1.3 中已弃用，并在 1.4 中完全（据称）删除。为什么它仍然存在（当他的 Fiddle 使用 1.7.2 时），我不知道。

【解决方案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);
});

【讨论】：