Change the value of select dropdown when checkbox is unchecked

Question

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?

Answer 1

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.com/go/7t3ZvFz5yF

Answer 2

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.com/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.

Answer 3

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

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

Answer 4

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.com/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> 

Answer 5

 $('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.com/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>