2
<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 文件。

4

2 回答 2

5

实际上,CSS -Tricks的Chris Coyer写了一篇关于这个主题的非常好的文章。你可以在这里看到它。例子

于 2011-08-14T13:58:56.167 回答
0

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

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

于 2011-08-14T14:30:18.653 回答