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>