jQuery - Check Checkbox based on Select Value

Question

Hi,

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

Create a function that is triggered by the "change" event on the select dropdown menu, which detects the chosen value and updates the correct box.

It would look something like this.

$("select#CAT_Custom_70944).change( function() {
    var val = this.value;
    if (val = "P.J. Gallagher's Drummoyne") {
        ... // Code to check correct box
    } else if (val = "P.J. Gallagher's Parramatta") {
        ... // Code to check correct box
    } else {
        ... // Code to check correct box
    }
}

Answer 2

Seems a little redundant to structure your form inputs like this - wouldn't it be easier to just have a dropdown, then a checkbox directly underneath that says "Subscribe to Newsletter"? You can infer the correct subscription on the server.

That way, no jQuery code is required at all.

Answer 3

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