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」個にすることができます。まるで木のようです。トップレベル(すべて選択)をクリックすると、チェックボックスの下にあるすべてのチェックボックスがオン/オフになります。「組織」をクリックするたびに、1つ下のすべてを選択し、「サブ組織」も同じにします。例を教えてください。jsファイルを変更する必要がない1つまたは2つのレベルを削除した場合、一般的なコードが必要です。

4

2 に答える 2

5

実際、CSS-TricksのChris Coyerは、このテーマについて非常に優れた記事を書いています。ここで見ることができます。

于 2011-08-14T13:58:56.167 に答える
0

次のような意味ですか:http://jsfiddle.net/xj7NY/1/

基本的に、click()イベントを「すべて選択」チェックボックスにアタッチし、その状態(チェックされているかどうか)が表示されていることを確認し、labelそれに応じて2番目のコンテナー(この例では要素)のすべてのチェックボックスに変更を適用します。

于 2011-08-14T14:30:18.653 に答える