Jquery选中复选框1时，选中复选框2

Question

我有一个活动复选框和一个高亮复选框。

我想活动复选框自动检查亮点复选框被选中时激活。我对于探索prop()还是做了添加属性的丑陋绑定感到茫然。

我最终寻找最干燥的推荐，当然任何代码片段都欢迎！

有点恼人，因为每个复选框（虽然旁边的海誓山盟在表都是自己的形式，这是与阿贾克斯的改变提交。

<td> 
    <% form_for(:catalog_item, catalog_item.item, :url => set_admin_catalog_item_path(catalog_item), :html => {:class => 'ajax'}) do |f| %> 
    <%= f.check_box :active %> 
    <% end %> 
</td> 
<td> 
    <% form_for(:catalog_item, catalog_item, :url => set_admin_catalog_item_path(catalog_item), :html => {:class => 'ajax'}) do |f| %> 
    <%= f.check_box :highlight %> 
    <% end %> 
</td> 

Answer 1

入住这FIDDLE

$(function() { 
    $('.active').on('click', function(){ 
     $(this).next().attr('checked' , $(this).is(':checked')); 
    }); 

});​ 

也可以使用

$(this).next().prop('checked' , $(this).is(':checked')); 

Answer 2

jsFiddle

由于HTML这样的：

HTML

<div id="ActHigh"> 
    <table> 
     <thead> 
      <tr> 
       <th> 
        <p> 
         Active 
        </p> 
       </th> 
       <th> 
        <p> 
         Highlight 
        </p> 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <input type="checkbox" name="act01" class="chk-active" /> 
       </td> 
       <td> 
        <input type="checkbox" name="hig01" class="chk-highlight" /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="checkbox" name="act02" class="chk-active" /> 
       </td> 
       <td> 
        <input type="checkbox" name="hig02" class="chk-highlight" /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="checkbox" name="act03" class="chk-active" /> 
       </td> 
       <td> 
        <input type="checkbox" name="hig03" class="chk-highlight" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

您可以使用jQuery这样的：

SCRIPT

<script type="text/javascript"> 
    $(function() { 
     // This will file through all "active" type checkboxes 
     $("#ActHigh .chk-active").each(function(i){ // Keep in mind, this refernce relys on active and highlight chkboxes being one right after the other in html 
      $(this).change(function(e) {// this tells us to do something on the current checkbox when it is checked, via mouse or keyboard 
       // this looks for the "highlight" checkbox with the same INDEX as the currently changed "active" checkbox 
       $("#ActHigh .chk-highlight").filter(function(ii){ return ii == i; }).prop("checked", $(this).prop("checked")); 
      }); 
     }); 
    }) 
</script>