Question

I’m after a small jQuery script that will check the appropriate check box based on what value is selected in a Select element input.

eg. If the value ‘P.J. Gallagher’s Drummoyne’ is selected in select#CAT_Custom_70944 then input#drummoyne-list.checkbox is checked. The same goes for all the options in the select list:

• ‘P.J. Gallagher’s Drummoyne’ checks input#drummoyne-list.checkbox
• ‘P.J. Gallagher’s Parramatta’ checks input#parramatta-list.checkbox
• ‘Union Hotel North Sydney’ checks input#union-list.checkbox

Has anyone seen something like this done before? Sample HTML code:

<div class="item">
    <label for="CAT_Custom_70944">Preferred GMH Hotel <span class="req">*</span></label><br />
    <select name="CAT_Custom_70944" id="CAT_Custom_70944" class="cat_dropdown">
        <option value=" " selected="selected">- Please Select -</option>
            <option value="P.J. Gallagher's Drummoyne">P.J. Gallagher's Drummoyne</option>
        <option value="P.J. Gallagher's Parramatta">P.J. Gallagher's Parramatta</option>
        <option value="Union Hotel North Sydney">Union Hotel North Sydney</option>
    </select>
</div>
<div class="item">
    <input type="checkbox" id="drummoyne-list" class="checkbox" name="CampaignList_20320" /> <label>Subscribe to: P.J. Gallagher's Drummoyne Newsletter</label>
</div>
<div class="item">
    <input type="checkbox" id="parramatta-list" class="checkbox" name="CampaignList_20321" /> <label>Subscribe to: P.J. Gallagher's Parramatta Newsletter</label>
</div>
<div class="item">
    <input type="checkbox" id="union-list" class="checkbox" name="CampaignList_20322" /> <label>Subscribe to: The Union Hotel Newsletter</label>
</div>

Answer 1

jQuery works great when there’s a pattern to follow. For example if the option values in the dropdown where simple like “drummoyne”, “parramatta” and “union”, that could be easily matched to the IDs of the checkboxes.

In the absence of such a pattern, I created the code below which matches them based on the sequence in which they appear.

$(function(){
  $('select.cat_dropdown').change(function(){
     $('.item :checkbox').removeAttr('checked'); //uncheck the other boxes
     $('.item :checkbox')[this.selectedIndex-1].checked = true;
  });
});