Question

我正在尝试使用复选框和下拉菜单来过滤（.hide（）,. show（））div。我有一个工作的例子，但需要两个功能来互相检查。

我们的想法是选中link2的复选框并在下拉菜单中选择2015，并且只显示div2（不是1和2）。

JS

jQuery("input[type='checkbox']").prop("checked", true);

$("input[type='checkbox']").on("click", function () {
    var selector = $(this).data("toggle");

    if ($(this).prop('checked')) {
        $(selector).show();
    } else {
        $(selector).hide();
    }

});

$('#year').change(function () {
    var val = $('#year').val();
    $('.yearselected').hide();
    if (val) {
        $("." + val).show();
    }
});

HTML

<input type="checkbox" data-toggle="#div1" />link 1
<input type="checkbox" data-toggle="#div2" />link 2
<input type="checkbox" data-toggle="#div3" />link 3
<input type="checkbox" data-toggle="#div4" />link 4
<select id="year">
    <option>2015</option>
    <option>2014</option>
</select>
<div id="div1" class="yearselected 2015">div 1</div>
<div id="div2" class="yearselected 2015">div 2</div>
<div id="div3" class="yearselected 2014">div 3</div>
<div id="div4" class="yearselected 2014">div 4</div>

Answer 1

您需要为复选框div id和年份选择值类选择器创建组合选择器。我不得不改变你的代码来实现这一目标。因此，如果您在selectbox中选中2015年的link1和link2复选框，则过滤器选择器将变为#div1.2015,#div2.2015。

查看下面的演示。

＆＃13;

var $divs = $('.yearselected');

$("input[type='checkbox'], #year").on("change", function () {
    var selector = getFilter();
    $divs.hide().filter(selector).show();
});

function getFilter() {
    return $(':checkbox:checked').map(function() {
        return $(this).data('toggle') + '.' + $('#year').val()
    }).get().join();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-toggle="#div1" />link 1
<input type="checkbox" data-toggle="#div2" />link 2
<input type="checkbox" data-toggle="#div3" />link 3
<input type="checkbox" data-toggle="#div4" />link 4
<select id="year">
    <option>2015</option>
    <option>2014</option>
</select>
<div id="div1" class="yearselected 2015">div 1</div>
<div id="div2" class="yearselected 2015">div 2</div>
<div id="div3" class="yearselected 2014">div 3</div>
<div id="div4" class="yearselected 2014">div 4</div>

＆＃13;

使用jQuery过滤两种输入类型

1 个答案: