如何通过 jquery 选中/取消选中多级复选框

Question

<div width="100%">
<ul>
    <li><label>
    <input type="checkbox" name="checkbox" id="checkbox" />
    </label>
    <strong>Select All        </strong>
     <ul>
     <li>&nbsp;
     <input type="checkbox" name="checkbox2" id="checkbox2" />Catalog</li>
</ul>
    </li>
    <li><input type="checkbox" name="checkbox4" id="checkbox4" /> 
    <strong>Orgnisation</strong>
<ul>
    <li>
    <input type="checkbox" name="checkbox5" id="checkbox5" />
    Device</li>
    <li>
    <input type="checkbox" name="checkbox8" id="checkbox8" />
    Gadgets</li>
    <li>
    <input type="checkbox" name="checkbox9" id="checkbox9" />Pour</li>
    <li>
    <input type="checkbox" name="checkbox10" id="checkbox10" /> 
    <strong>SubOrg</strong>
<ul>
    <li>
    <input type="checkbox" name="checkbox11" id="checkbox11" />
    123              </li>
    <li>
    <input type="checkbox" name="checkbox12" id="checkbox12" />
    456</li>
    <li>
    <input type="checkbox" name="checkbox13" id="checkbox13" /> 
    789</li>
</ul>
    </li>
</ul>
    </li>
    <li><input type="checkbox" name="checkbox3" id="checkbox3" />
    <strong>Orgnisation1</strong>&nbsp;
<ul>
    <li>
    <input type="checkbox" name="checkbox6" id="checkbox6" />
    Device1</li>
    <li>
    <input type="checkbox" name="checkbox7" id="checkbox7" />
    Gadgets1</li>
    <li>
    <input type="checkbox" name="checkbox14" id="checkbox14" />
    Pour1</li>
    <li>
    <input type="checkbox" name="checkbox15" id="checkbox15" />
    <strong>SubOrg </strong>
    <ul>
    <li>
    <input type="checkbox" name="checkbox16" id="checkbox16" />
    123a </li>
    <li>
    456a</li>
    <li>
    <input type="checkbox" name="checkbox18" id="checkbox18" />
    789a</li>
</ul>
    </li>
</ul>
    </li>
</ul>

我是 JQuery 领域的新手，想要实现我在以下代码中呈现的任何内容。它可以是“N”个级别。它就像一棵树。当我单击顶层（全选）时，它的选中/未选中所有以下复选框。每当我点击“组织”时，它会选择所有低于一个且相同的“子组织”。请帮我举个例子。如果我删除了一个或两个级别，我想要一个通用代码，我不需要修改我的 js 文件。

Answer 1

其实CSS-Tricks的Chris Coyer写了一篇关于这个主题的非常好的文章。你可以看到它here。 Example.

Answer 2

你的意思是这样的吗：http://jsfiddle.net/xj7NY/1/

基本上，您将 click() 事件附加到“全选”复选框，检查您是否看到其状态（选中与否）并将更改应用于第二个容器中的所有复选框（此容器中的 label 元素例如）相应地。