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

        }
});

情况：检查子项2 +子项1 +子项2

问题：我想在取消选中子项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 example

一些注意事项：

我不确定您在类型选择器中使用@的原因，但这是不必要的
您需要使用$(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);
});

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

2 个答案: