jQuery: Change dropdown select when checkbox is checked/unchecked

Question

I have this form:

<input type="checkbox" value="First" />First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third

<select name="first-drop">
    <option value="---">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>

Is there a way (using JS/jQuery) I can change the value of first-drop to --- whenever the First check box is unchecked?

Those two paragraphs have two totally different meanings. Do you want to hide or change the value? — gdoron
– gdoron, Commented Mar 27, 2012 at 9:51
Change the value. Fixed the question, sorry about that confusing bit. — gabmadrid
– gabmadrid, Commented Mar 27, 2012 at 9:57

gdoron · Accepted Answer · 2012-03-27 10:12:11Z

3

$('input[type="checkbox"][value="First"]').change(function (){
    $('select[name="first-drop"]').toggle();
});

LIVE DEMO

Note that I fixed you markup:

<input type="checkbox" value="First" checked="checked" >First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third

<select name="first-drop">
    <option value="">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>

Update:

What you want now is:

$('input[type="checkbox"][value="First"]').change(function() {
    if (!this.checked) {
        $('select[name="first-drop"] option:first').prop('selected', 'selected');
    }
});

LIVE DEMO

If you will give your DOM elements ids it can be simple as that:

$('#first').change(function() {
    if (!this.checked) 
        $('#nothing').prop('selected', 'selected');
});

Updated DOM:

<input type="checkbox" value="First" id="first" >First
<input type="checkbox" value="Second">Second
<input type="checkbox" value="Third">Third

<select name="first-drop">
    <option value="" id="nothing" >---</option>
    <option value="Option1" >Option1</option>
    <option value="Option2">Option2</option>
</select>

LIVE DEMO

edited Mar 27, 2012 at 10:12

answered Mar 27, 2012 at 9:45

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

1 Comment

gabmadrid Over a year ago

Thank you for the markup fix! My problem is more of changing the selected value of the dropdown when the checkbox is unchecked, rather than making the dropdown disappear. My wording might be misleading, I'll revise it.

Mathew Thompson · Accepted Answer · 2012-03-27 10:09:07Z

2

I added an ID to the first checkbox

<input id="first" type="checkbox" value="First">First</input>
<input type="checkbox" value="Second">Second</input>
<input type="checkbox" value="Third">Third</input>

<select name="first-drop">
    <option value="">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">$Option2</option>
</select>

<script type="text/javascript">
    $(function () {
        $("#first").click(function () {
            if ($(this)[0].checked == true) {
                $("[name='first-drop'] option:first").attr("selected", "selected");
            }
        });
    });
</script>

Demo:

http://jsfiddle.net/8BtYc/2/

Edit: Fixed my code so that it doesn't toggle when you uncheck the first checkbox

edited Mar 27, 2012 at 10:09

answered Mar 27, 2012 at 10:03

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Collectives™ on Stack Overflow

jQuery: Change dropdown select when checkbox is checked/unchecked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related