Check Checkbox based on Select Value Using jQuery

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>

Jose Basilio · Accepted Answer · 2009-06-05 07:55:07Z

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

edited Jun 5, 2009 at 7:55

answered Jun 5, 2009 at 6:04

Jose Basilio

51.7k13 gold badges124 silver badges117 bronze badges

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

1 Comment

Philippe Leybaert Over a year ago

setting or clearing a checkbox is a lot easier (and faster) if you use the DOM element itself, so the last line in your code would become $(".item :checkbox")[this.selectedIndex-1].checked = true;

Sam · Accepted Answer · 2009-06-05 06:04:12Z

1

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.

answered Jun 5, 2009 at 6:04

Sam

6,29534 silver badges42 bronze badges

Comments

Peter Gibbons · Accepted Answer · 2011-02-28 18:22:24Z

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...
    }
}

edited Feb 28, 2011 at 18:22

Peter Gibbons

1031 gold badge2 silver badges15 bronze badges

answered Jun 5, 2009 at 6:02

Marquis Wang

11.1k5 gold badges32 silver badges25 bronze badges

Collectives™ on Stack Overflow

Check Checkbox based on Select Value Using jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related