Как установить / снять флажок многоуровневых флажков через jquery - PullRequest
Новая
       6

Как установить / снять флажок многоуровневых флажков через jquery

2 голосов
/ 14 августа 2011 
<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» номер уровня. Это как дерево. Когда я нажимаю на верхнем уровне (выбрать все), его флажок отмечен / снят. Всякий раз, когда я нажимаю на «orgnisation», выбирайте все ниже одного и того же для «suborg». Пожалуйста, помогите мне с примером. Я хочу родовой код, если я удалил один или два уровня, мне не нужно изменять мой файл js.

Ответы [ 2 ]

5 голосов
/ 14 августа 2011

На самом деле, Крис Койер из CSS-хитрости написал очень хорошую статью на эту тему. Вы можете видеть это здесь . Пример .

0 голосов
/ 14 августа 2011

Вы имеете в виду что-то вроде этого: http://jsfiddle.net/xj7NY/1/

По сути, вы присоединяете событие click () к флажку «выбрать все», проверяете, видите ли вы его состояние (отмечено или нет), и применяете изменения ко всем флажкам во втором контейнере (элемент label в этом пример) соответственно.

...