JQuery：取消选中ul li中的子邮箱复选框 [英] JQuery: uncheck subchild checkbox inside ul li

问题描述

我有这样的代码：

 <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

Situation: child 2 + subchild1 + subchild2 is checked

问题：我想取消选中subchild1 + subchild2当我点击取消选中子2，上面的代码不工作。我认为它与以下有关：

Problem: i want to uncheck the subchild1 + subchild2 when i clicked uncheck of child 2, my code above does not work. i think it has something to do with:

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

任何帮助将是巨大的。这里是JSfiddle： http://jsfiddle.net/p324w/

any help would be great. Here is JSfiddle: http://jsfiddle.net/p324w/

推荐答案

$('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示例

jsFiddle example

一些注意事项：

• 我不确定为什么您在类型选择器中使用 @ ，但这是不必要的


• 您需要使用 $（this）.parent（）。find 导航到DOM中的正确输入元素


• code> .prop（'checked'，false）而不是 .attr（'checked'，false）
  
• level 不是有效的属性。如果您需要自定义属性，请使用 data - * 。

• I'm not sure why you were using @ in your type selector but it's unnecessary
• You need to use $(this).parent().find to navigate to the proper input elements in the DOM
• Use .prop('checked', false) instead of .attr('checked', false).
• level isn't a valid attribute. If you need custom attributes, use data-*.

这篇关于JQuery：取消选中ul li中的子邮箱复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！