Jquery When checkbox 1 is checked check checkbox 2

Question

I have an active checkbox, and a highlight checkbox.

I'd like the Active checkbox to automatically check the highlight checkbox when active is checked. I'm up against the fence on whether to explore prop() or do an ugly bind that adds a attribute.

I'm ultimately looking for the dryest recomendation and of course any code snippets are MORE THAN welcome!!!

Somewhat annoying because each check box (although right next to eachother in a table are their own form, which is submitted with ajax on change.

    <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

jsFiddle

Given HTML like:

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>

You could use jQuery like:

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>

Answer 2

Check this FIDDLE

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

});​

Also can use

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