javascript - 使用复选框的 jQuery 组合过滤器

Question

我有 5 个使用 jQuery 的复选框，我想根据复选框选择显示/隐藏 div。但组合选定的复选框以构建单个查询。例如，如果用户检查了 weekly 和 small 我只想显示具有这两个类的 div。不显示具有一个或其中之一的 div。

我知道我可以用每种可能的组合编写一堆 if 语句，但我认为有更好的方法。目前，我根据每个选项单独显示/隐藏 single 类的 div，而不是组合结果。

$short = $('input[name="short"]:checked').length > 0;
$weekly = $('input[name="weekly"]:checked').length > 0;
$small = $('input[name="small"]:checked').length > 0;
$medium = $('input[name="medium"]:checked').length > 0;
$big = $('input[name="big"]:checked').length > 0;

if( $all == false && $short == false && $weekly == false && $small == false && $medium == false && $big == false){

} else {
  $('.single').hide(); 

  if ($short == true) {
    $('.single.short').show();
  }
  if ($weekly == true) {
    $('.single.weekly').show();
  }
}

Answer 1

您可以根据选中复选框创建有效的选择器

//Hide All elements
$('.single').hide();

//Get checked checkboxes
var checkedCheckboxes = $('input[name="short"],input[name="weekly"],input[name="small"],input[name="medium"],input[name="big"]').filter(':checked');

//If User has selected any checkbox
if (checkedCheckboxes.length) {
    //Get name
    var names = checkedCheckboxes.map(function () {
            return $(this).attr('name');
        }).get();

    //Create selector   
    var selector = '.' + names.join('.');

    //Show target elements
    $('.single' + selector).show();
}