Выберите несколько дочерних элементов и дочерних элементов при установке флажка root - PullRequest
Новая
       32

Выберите несколько дочерних элементов и дочерних элементов при установке флажка root

1 голос
/ 15 марта 2012

Javascript (JQuery) 

$('.ic_parent').change(function(){
  var id = $(this).attr('value')
  while (id.length >0){
    if ($(this).attr('checked')) {
      $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').attr('checked', $(this).attr('checked'));
    }else{
      $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').removeAttr('checked');
    }
    id = $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').attr('value')
  }
});

У меня есть эта древовидная таблица, и я хочу установить флажок каскада.

Когда я нажимаю на корень, предполагается, что щелкают все дочерние элементы, например 

root(selected)
  --child1(selected)
    -----subchild1(selected)
    -----subchild2(selected)
    -----subchild3(selected)
  --child2(selected)
    -----subchild1(selected)
    -----subchild2(selected)

Мой текущий код не проверяет subchild1 и 2 для child2

Как бы я изменил свой код, чтобы это стало возможным?

решено:

Хорошо, надеюсь, это поможет людям, которые наткнулись на этот пост в надежде реализовать такую ​​древовидную таблицу. Ф. Кальдеран указал на хороший код, но он делал только половину работы, как будто вы нажимаете на родителя вместо дедушки, ничего не происходит. 

$('.blah).live('change',function(){
  var id = $(this).attr('value')
  var state = $(this).attr('checked')
  var plat = $(this).attr('platform')
  child_checker = $('#update_cycles_table').find('input:checkbox[key ^= "child-of-' + id + '_'+plat+'"]').attr('checked')
  if (child_checker == "checked"){
    $(this).removeAttr('checked')
  }
  while (id.length >0){
    if (state){
      $('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').attr('checked', 'checked')    
    }else{
      $('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').removeAttr('checked');
    }
  id=($('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').attr('value'));
  }
});

вам также нужна проверка ребенка, чтобы убедиться, что при нажатии на середину дерева вершина также не проверяется. Без проверки он не распознает, что флажок не был проверен, и не будет ничего выполнять.

Ответы [ 3 ]

1 голос
/ 15 марта 2012

Извините, ваш код не был правильно сформирован, я заменил таблицы с другой структурой DOM

Вы извлекаете рабочий пример на http://jsfiddle.net/ch4nd4n/3e2hd/ и соответственно изменяете свой код. Код выполняет поиск родителя по имени класса и использует идентификатор для поиска DOM, содержащего дочерние флажки.

Упрощенный HTML 

<div>
    <input class="ic_parent" id='1' type="checkbox" value="SYSTEM" />p1
    <ul class="ic_parent1">
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c1
        </li>
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c2
        </li>
    ​​​</ul>
    <input class="ic_parent" id='2' type="checkbox" value="SYSTEM" />p2
    <ul class="ic_parent2">
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c3
        </li>
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c4
        </li>
    </ul>
​​​​​​​​​​​​​​​​</div>

И Javascript для проверки или снятия отметки 

$(".ic_parent").click(function() {
    if ($(this).attr('checked')) {
        $('.ic_parent' + $(this).attr('id')).find('.ic_child').attr('checked', 'checked');
    } else {
        $('.ic_parent' + $(this).attr('id')).find('.ic_child').removeAttr('checked');
    }
});​
1 голос
/ 15 марта 2012

Я бы порекомендовал не зависеть от идентификаторов и т.п., чтобы выполнить это поведение. Если вы используете HTML для правильного описания структуры, в jQuery легко выбрать правильные элементы.

Я сделал быстрый пример на http://jsfiddle.net/jRAcq/

1 голос
/ 15 марта 2012

Если я хорошо понял, я думаю, вы должны изменить 

$('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]')

на 

$('#update_ics_table').find('input:checkbox[id ^= "child-of-' + id + '"]')

обратите внимание на ^= вместо =
Я думаю, чтопотому что, когда вы устанавливаете флажок system, ваш скрипт ищет только флажок child-of-SYSTEM, а не child-of-SYSTEMspb

...