2012-03-14 2 views
0

을 체크 박스재귀 루프 내 자바 스크립트

$('.ic_parent').change(function(){ 
    if ($(this).attr('checked')){ 
     $('#update_ics_table').find('input:checkbox[id = "child-of-' + $(this).attr('value') + '"]').attr('checked', 'checked'); 

//$(this).parents('tbody의 TR :. EQ (0) '.) 찾을 수 있습니다 ('아동 ') .attr ('checked', this.checked);

}else{ 
    $('#update_ics_table').find('input:checkbox[id = "child-of-' + $(this).attr('value') + '"]').removeAttr('checked'); 
} 

}); 

내 HTML 소스 코드

<tr class='root' id='DB'> 
     <td>DB</td> 
     <td><input class="ic_parent" id="ic_root" name="ic_root" type="checkbox" value="DB" /></td> 
    </tr> 
    <tr class='child-of-DB' id='DBmanual'> 
     <td>manual</td> 
     <td><input class="ic_parent" id="child-of-DB" name="child-of-DB" type="checkbox" value="DBmanual" /></td> 
    </tr> 

    <tr class='child-of-DBmanual' id='DBmanualwarmstandby'> 
     <td>warmstandby</td> 
     <td><input class="ic_parent" id="child-of-DBmanual" name="child-of-DBmanual" type="checkbox" value="DBmanualwarmstandby" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='802'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/802">upgrade_7</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="802" /></td> 

    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='810'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/810">break_destroy_7</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="810" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='809'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 

     <td><a href="/ics/809">break_destroy_5</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="809" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='808'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/808">break_destroy_1</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="808" /></td> 
    </tr> 

    <tr class='child-of-DBmanualwarmstandby' id='807'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/807">ic alerts_7</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="807" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='806'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/806">ic alerts_1</a></td> 

     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="806" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='805'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/805">failoverdb_3</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="805" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='804'> 

     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/804">modify_all</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="804" /></td> 
    </tr> 
    <tr class='child-of-DBmanualwarmstandby' id='803'> 
     <!-- /%td= link_to ic.name, edit_ic_path(ic.id) --> 
     <td><a href="/ics/803">general_func_5</a></td> 
     <td><input id="ic_ids_" name="ic_ids[]" type="checkbox" value="803" /></td> 

    </tr> 

은 체크 박스를 부모가 선택 될 때 이것은 자식 아래 노드와 검사를 본다

- Ic.make_tree(@ics).values.each do |root| 

    %tr{:id => root.tree_id, :class => "root"} 

    %td= root.root_name 

    - if show_check_boxes 

     %td= check_box_tag "ic_root", "#{root.tree_id}", false, :class => "#{root.tree_id}" 


    - root.suites.each do |suite| 

    %tr{:id => suite.tree_id, :class => "child-of-#{root.tree_id}"} 

     %td= suite.suite_name 

     - if show_check_boxes 

     %td= check_box_tag "child-of-#{root.tree_id}", "#{suite.tree_id}", false, :class => "child-of-#{root.tree_id}" 


    - suite.children.each do |case_item| 

     %tr{:id => case_item.tree_id, :class => "child-of-#{suite.tree_id}"} 

     %td= case_item.case_name 

     - if show_check_boxes 

      %td= check_box_tag "child-of-#{suite.tree_id}", "#{case_item.tree_id}", false, :class => "child-of-#{suite.tree_id}" 


     - case_item.children.each do |ic| 

     %tr{:id => ic.id, :class => "child-of-#{case_item.tree_id}"} 

      //%td= link_to ic.name, edit_ic_path(ic.id) 

      [email protected]_model=Ic.find(ic.id) 

      -puts "inside _listing ic_id=#{ic.id}" 

      %td= link_to ic.name, ic_path(ic.id) 

      - if show_check_boxes 

      %td= check_box_tag "ic_ids[]", "#{ic.id}", false 

레일 그러나 나는 재귀 어디 싶지 부모 확인란은 직접적인 자식 외에 모든 자식 노드를 검사합니다. 아무도 내가 그것을 어떻게 할 수 있는지 안다?

+0

당신이 일하는 것을 보여주는 대표적인 [JS Fiddle demo] (http://jsfiddle.net/)를 만들 수 있습니까? –

+0

http://jsfiddle.net/zF4xJ/ – lifejuggler

답변

2

이 경우 jQuery 라이브러리의 "find"메소드가 유용 할 수 있습니다.

문서 #update_ics_table 당신이 표시된 원하는 모든 자식 확인란을 포함 가정 http://api.jquery.com/find/

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

@, 위에서뿐만 아니라 직접적인 아이, 모든 후손을 얻어야한다.

+0

나는 Dulan을 말했지만 여전히 반복적 인 반복을하지 않았다. 나는 그것이해야한다면 .change를하면 세 번째 하위 수준으로 끝날 때까지 js를 할 것이지만 그것은 첫 번째 직후에 멈춘다 고 생각했다. 도와주세요!!! – lifejuggler

+0

@ user1193542 선택자를 변경하여 상위 태그 역할을하는 모든 체크 박스를 잡아 봅니다. 예 :'$ ('# parent_id'). find ('input : checkbox')' 원래 질문에있는 HTML의보다 완전한 예는 여러분이 가로 지르는 구조를 더 잘 이해하는 데 도움이 될 수 있습니다. – Dulan

관련 문제