Question

我有一个div列表，我希望使用2组复选框进行过滤：Type和Category。

当选中2个类别时，它应显示包含至少1个类别的DIV。

检查类型时，它应该只显示该类型的DIV。即使它包含已检查的类别。

<input type="checkbox" name="type[]" value="Type 1">
<input type="checkbox" name="type[]" value="Type 2">
<input type="checkbox" name="type[]" value="Type 3">

<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">

DIV：

<div data-type="Type 1" data-cat="1 4">
<div data-type="Type 2" data-cat="1 2 3">

到目前为止我的代码（仅过滤器类型）：

$('form input:checkbox').change(function(){
  var type = [];
  var checked = $(':checkbox:checked').length;

  // Hide all
  $('#videoHolder').children('div').hide();

  $(':checkbox:checked').each(function(i){
    type[i] = $(this).val();
    $('#videoHolder').children('div[data-type="' + type[i] + '"]').fadeIn();
  });

  // Show all
  if(checked==0){
      $('#videoHolder').children('div').fadeIn();
  } 
});

Answer 1

您需要手动检查每个类别属性。或者您可以考虑使用jQuery的regEx插件。

// select only category check box-es!!
$(':checkbox:checked').each(function(i, checkBox){

    var search = $(checkBox).val();

    $('#videoHolder').children('div').each(function(index, divTag) {
      var category = $(divTag).attr("data-cat");
      var dataType = $(divTag).attr("data-type");

     if (isOfType(search, dataType) || containsCategory(search, category))
         $(divTag).fadeIn();
     });
  });

带有覆盖的jQuery多选择器

1 个答案: