使用jQuery过滤两种输入类型

Using jQuery to filtering with two input types

本文关键字：输入 类型 两种 过滤 jQuery 使用      更新时间：2023-09-26

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

http://jsfiddle.net/fj8vLns1/3/

这个想法是选中链接2的复选框，并在下拉菜单上选择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>

您需要为复选框div id和year select value class选择器制作一个组合选择器。为了实现这一点，我不得不更改您的代码。因此，如果您选中链接1和链接2复选框中的"2015年"复选框，则过滤器选择器将变为#div1.2015,#div2.2015。

查看下面的演示。

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

相关文章：