Question

我现在遇到一个问题，我无法使用我找到的方法（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”等等......

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

Answer 1

这是你要找的吗？

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

Answer 2

您的问题是，在您的示例中，其他列表实际上不是“相应”复选框的子项。他们实际上是兄弟姐妹。如果你将它变成真正的孩子，那么很容易选择它，例如jQuery：

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

像这样。

Answer 3

假设您确实拥有一组具有此结构的列表：

<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中省略它;如果您不想检查它，请删除点击处理程序的第二行和第三行。

如果您的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上的事件冒泡并导致所有复选框都被检查。

这两种可能性都是sample。

选中列表子项中的复选框

3 个答案: