如何使用JQuery根据下拉选择隐藏复选框列表？

Question

我有一个带有下拉列表的表单。 根据下拉列表中的选定项目，将出现相应的复选框列表，其他复选框列表将消失。 您如何使用JQuery完成此操作？

Answer 1

这是您应该能够轻松适应特定元素的Javascript：

$('#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();
        }
    }
});

本质上，您只想在下拉列表每次更改时运行一个函数，然后在其中检查当前选定的值，然后根据观察到的值运行所需的代码。

Answer 2

这是一个非常基本的示例-http://jsfiddle.net/jayblanchard/G8z3r/可以通过使用不同的选择器，id和类来缩短代码，但是我想给您一个基本的思路。

$('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();
    }
});