I have to do a event when checkbox is unchecked then select dropdown value is set to be null or default.

Html code:

<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

In above code i am append/show dropdown on click of checkbox. Now i have to do this when i uncheck the checkbox at that time set the value of dropdown to be null/default.

Javascript code:

$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("id");
    $("." + inputValue).toggle();
});

This is my JS code, from this i am appending the select div beside my checkbox.

Can anyone help me for that?

I have to do a event when checkbox is unchecked then select dropdown value is set to be null or default.

Html code:

<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

In above code i am append/show dropdown on click of checkbox. Now i have to do this when i uncheck the checkbox at that time set the value of dropdown to be null/default.

Javascript code:

$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("id");
    $("." + inputValue).toggle();
});

This is my JS code, from this i am appending the select div beside my checkbox.

Can anyone help me for that?

• javascript
• jquery
• html
• checkbox

• Can you post you JavaScript / jQuery that you're using to append / show the dropdown on click as well please? – Obsidian Age Commented Mar 14, 2017 at 3:30
• @ObsidianAge - yes, i edit my question. Now you can see it. – Darshan Gorasia Commented Mar 14, 2017 at 3:34
• @Darshan do you want to set select box to 'No Preference' when u change the checkbox state or u want to add and select a new option with empty value? – ajai Jothi Commented Mar 14, 2017 at 3:38
• @ajaiJothi - yes i have to set select box to 'No Preference' when i change the checkbox state. – Darshan Gorasia Commented Mar 14, 2017 at 4:09
• After your toggle code add the following condtion if(!$(this).is(':checked)){ $("." + inputValue).find('select').val("-1"); } – ajai Jothi Commented Mar 14, 2017 at 4:37

5 Answers 5

Try this! :D

$(document).ready(function() {
    $('select').on('click change',function() {
        $(this).closest('div.checkbox').find('input:checkbox').prop('checked',$(this).val()>0);
    });
    $('input:checkbox').on('click change',function() {
        if (!$(this).is(':checked')) $(this).closest('div.checkbox').find('select').val('-1');
    });
});

See working demo on codeply: http://www.codeply./go/7t3ZvFz5yF

Do something when checkbox is unchecked

Inside of your function, you can check whether the checkbox is checked/unchecked with:

if (this.checked)

or

if (!this.checked)

and put whatever code you want to execute based on this condition in the if block.

Select an option from dropdown with jQuery

You can use the value attribute of the option you want to select:

$('#yourDropdown select').val('valueOfOptionToBeSelected`);

Example:

$('input[type="checkbox"]').click(function(){
    
    var inputValue = $(this).attr("id");
    $("." + inputValue).toggle();
    
    if (!this.checked) {
      
      $("." + inputValue + ' select').val('-1');
    
    }
    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box" style="display:none">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box" style="display:none">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box" style="display:none">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

Also, I'm not sure what your intention is, but you might want to add display: none to hide the drop down on page load, and then toggle the visibility when the user interacts with the checkbox.

I'm pretty sure I get what you want. When you check a box, it selects 1 (or whatever you would prefer). When you uncheck, it sets it back to no preference.

$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("id");
    if ($(this).is(":checked")) {
		$("." + inputValue + " select").val(1);
	} else {
		$("." + inputValue + " select").val(-1);
	}
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

if ($('.tomorrow-schedule-time').is(':checked')){
            //
            } else {

               $('select').append('<option>Default</option>');
            }

$('input[type="checkbox"]').on('change', function(){
    var $select = $(this).parents('.checkbox').find('select');
    console.log($select.length);
    $select.val("1");
    
    if (!$(this).is(':checked')) {
    console.log('uncheck');
      $select.val("-1");
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>