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

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。