父复选框的递归循环以检查所有子复选框

Question

在我的 javascript 中

 $('.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)').find('.child').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)

          -@ic_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

这会查看下面的子节点并在检查父节点时对其进行检查，但我想做一个递归，其中父复选框检查除直接子节点之外的所有子节点。有谁知道我该怎么做？

Answer 1

jQuery 库中的“find”方法在这种情况下可能很有用。

文档@ 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');
    }
});

假设#update_ics_table 包含您要标记的所有子复选框，则上述应获取所有后代，而不仅仅是直系子。