选中列表中的复选框'的孩子

Select the checkboxes in list's children

本文关键字：孩子 复选框 列表      更新时间：2023-09-26

我现在有一个问题，无法使用我找到的方法解决(http://jsfiddle.net/nick_craver/BgXrz/，http://code.google.com/p/jquery-tree/)。两者都不能完全解决我的解决方案，但它们给了我一个如何做的想法，我想要什么。

好的。这是我的问题：

我有一个列表（包括ul和li），在每个中

<li>
    there is a checkbox and some text. E.g.: 
    <ul>
        <li>
            <p>
                <input type="checkbox" name="this_name" checked/>Description
                Bla: <input type="text" size="8" name="this_arg" value=""/>
            </p>
        </li>
    </ul>

其中（在结束的li后面）有一个完整的其他参数树，这些参数有其他名称等等，所以它创建了一个类似的树

<ul>
  <li>A
    <ul>
      <li>AA</li>
      <li>AB
        <ul>
          <li>ABA</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

结构本身现在应该是清楚的。

现在我想使用jQuery或Javascript来检查某个父级的子级中的所有元素。例如，如果我标记"A"，我希望检查所有节点。如果我点击"AB"，我想检查"ABA"，等等…

我不太明白我该怎么做，我很感激任何帮助。

这就是您想要的吗？

http://jsfiddle.net/johncmolyneux/pqLts/2/

<ul>
    <li>Main
        <ul>
            <li><input type="checkbox" /> parent 1
                <ul>
                    <li><input type="checkbox" />sub 1</li>
                    <li><input type="checkbox" />sub 2
                        <ul>
                            <li><input type="checkbox" />sub sub 2</li>
                            <li><input type="checkbox" />sub sub 3</li>
                        </ul>
                    </li>
                </ul> 
            </li>
            <li><input type="checkbox" />parent 2</li>
        </ul>
    </li>
</ul>
$(function() {
    $(":checkbox").click(function() {
        var checked = $(this).attr("checked");
        $(this).parent().find(":checkbox").attr("checked", checked);
    });
});

您的问题是，在您的示例中，附加列表实际上不是"对应"复选框的子列表。他们实际上是兄弟姐妹。如果你想让它成为真正的孩子，那么用jQuery:选择它就足够容易了

$(':checkbox').click(function() {
  $(':checkbox', $(this).parent()).attr('checked', 'checked');
});

像这样的东西。

假设您确实有一组具有以下结构的列表：

<ul>
    <li>
        <p><input type="checkbox" /> A</p>
    </li>
    <ul>
        <li>
            <p><input type="checkbox" /> AA</p>
        </li>
        <li>
            <p><input type="checkbox" /> AB</p>
        </li>
        <ul>
            <li>
                <p><input type="checkbox" /> ABA</p>
            </li>
        </ul>
    </ul>
</ul>

你可以这样做：

$('li').click(function(){
    $(this)
        .find('p>input:checkbox').attr('checked', 'checked')
    .end()
        .next('ul').find('li>p>input:checkbox').attr('checked', 'checked');
});

这与@mgibsonbr的回答基本相同。

注意：我在这里假设，如果单击"A"，您希望将复选框包括在内。如果没有复选框，请在HTML中省略它；如果不希望选中它，请删除click处理程序的第二行和第三行。

如果你的HTML实际上是这样的：

<ul>
    <li><p><input type="checkbox" /> A</p>
        <ul>
            <li><p><input type="checkbox" />AA</p></li>
            <li><p><input type="checkbox" />AB</p>
                <ul>
                    <li><p><input type="checkbox" />ABA</p></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

然后你可以这样做：

$('li').click(function(e){
    e.stopPropagation();
    $(this).find('p>input:checkbox').attr('checked', 'checked');
});

在这里，有必要防止子li上的事件冒泡并导致所有复选框都被选中。

以下是两种可能性的示例。

相关文章：