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”级别。它就像一棵树。当我点击顶层（全选）时，选中/取消选中以下全部复选框。每当我点击“组织”时，它选择所有低于一个和相同的“suborg”。请帮我举个例子。如果我删除了一个或两个级别，我需要一个genric代码，我不需要修改我的js文件。

Answer 1

实际上， Chris Coyer 的 CSS-Tricks 写了一篇关于这个主题的非常好的文章。您可以看到 here 。 Example

Answer 2

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

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

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

2 个答案: