show/hide checkbox based on select option value

问题

How to show/hide a checkbox based on select option value? I want to show a checkbox based on a single value in select option and want to hide it when other values are selected. I am trying for jquery solution.

$('#abcselect').change(function(){$('#unknownlicense').toggle($(this).val() == 'first')});

回答1:

$(document).ready(function() {
    $("select").change(function() {
        $("#foo").toggle($(this).val() == "something"));
    }).change(); // in case the first option is selected on page load
});

Try it out: http://jsfiddle.net/JMGMx/3/

Also, see http://api.jquery.com/toggle/ and http://api.jquery.com/slidetoggle/

回答2:

    $('#YourSelectId').change(function () {
        if($(this).val() == 'TheValueOftheOptionThatHasCheckboxes'){
            $('#IdOfDivContainingTheCheckBoxes').show();
        }
        else{
            $('#IdOfDivContainingTheCheckBoxes').hide();
        }
    });

回答3:

You could always set that checkbox (or the surrounding div) to the same ID as the value in the select option so that when that value is selected, you just do a:

$('#sameIDasOption').show();

回答4:

You can bind to the select option changed using jquery with code similar to the following:

$('.target').change(function() { 
    alert('Handler for .change() called.'); 
 });

You can show and hide with the .show() and .hide() methods.

You can combine these to do something like

$('#SelectId').change(function (){
    if($(this).val() == 'ShowCheckBox'){
         $('DivWithCheckboxes).show()
     }
     else{
         $('DivWithCheckboxes).hide()
     }
});

You can find more information about the functions at:

http://api.jquery.com/change/
http://api.jquery.com/show/
http://api.jquery.com/hide/

来源：https://stackoverflow.com/questions/3345630/show-hide-checkbox-based-on-select-option-value

标签

jquery

select

checkbox

options