How to hide a checkboxlist based on a dropdown selection using JQuery?

Question

I have a form with a dropdownlist. Based on the selected item in the dropdown respective chekbox list appears and other checkboxlist disappears. How can you accomplish this using JQuery?

Answer 1

Here's Javascript that you should be able to easily adapt to your specific elements:

$('#dropdownlist').on('change', function () { 
    if ($(this).val()) {
        if($(this).val() === "some value") {
            $('#somecheckboxgroup').show();
            $('#someothercheckboxgroup').hide();
        }
        else if($(this).val() === "some other value") {
            $('#somecheckboxgroup').hide();
            $('#someothercheckboxgroup').show();
        }
    }
});

Essentially, you just want to run a function every time the dropdownlist changes, and in it, check the currently selected value and then run your desired code based on the observed value.

Answer 2

Here is a really basic example - http://jsfiddle.net/jayblanchard/G8z3r/ The code can be shortened up just by using different selectors, id's and classes but I wanted to give you a basic idea on how this works.

$('select[name="showbox"]').change(function() {
    if('foo' == $(this).val() ) {
        $('div').hide(); // make sure all divs are hidden
        $('#checkboxA').show(); // show the right one
    } else if ('bar' == $(this).val() ) {
        $('div').hide(); // make sure all divs are hidden
        $('#checkboxB').show(); // show the right one
    } else if ('both' == $(this).val() ) {
        $('div').show(); // sow all divs
    } else {
        $('div').hide();
    }
});