CODEWITHSUNDEEP
javascriptjqueryhtmlforms
mattt
mattt

Reputation: 1471

Check Checkbox based on Select Value Using jQuery

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:

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>

Upvotes: 3

Views: 8450

Answers (3)

Marquis Wang
Marquis Wang

Reputation: 11118

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

Upvotes: 1

Jose Basilio
Jose Basilio

Reputation: 51548

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

Upvotes: 3

Sam
Sam

Reputation: 6285

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.

Upvotes: 1

Related Questions