Pergunta

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?

Foi útil?

Solução

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.

Outras dicas

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();
    }
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top