Jquery When checkbox 1 is checked check checkbox 2

Question

I have an active checkbox, and a highlight checkbox.

enter image description here

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>

Pulling that branch now, sorry totally forgot to put the code in. BRAIN FART! I tried the prop though and couldn't get it rolling. — jahrichie
– jahrichie, Commented Sep 26, 2012 at 21:28

Sushanth -- · Accepted Answer · 2012-09-26 21:28:32Z

3

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'));

answered Sep 26, 2012 at 21:28

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jahrichie Over a year ago

Thanks! Added my code above. Couldn't get this to work unfortunately

SpYk3HH · Accepted Answer · 2012-09-26 21:41:43Z

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>

answered Sep 26, 2012 at 21:41

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

2 Comments

jahrichie Over a year ago

This almost works for me! It works for the first checkboxes on the page but after that it won't. Any way for me to adapt? THANKS IN ADVANCE!!!

SpYk3HH Over a year ago

It's all in your "selectors". See this jQuery API piece for more precise info. Long story short, if you want it to grab all on the document, just use the classes associated with them. However, I used a wrapping element tag's ID to give more precision in my example. This allows for easier debugging if an issue arises since this is all based on the INDEX of the inputs. This means that you must maintain the order they appear in the HTML.

Collectives™ on Stack Overflow

Jquery When checkbox 1 is checked check checkbox 2

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related