Question

我有一些复选框，想隐藏所有已检查类的元素。这是与苦恼的一些膳食，我希望用户能够隐藏所有菜单，例如“奶酪”。

我试过“切换”但是当我点击更多元素时它会出现问题（认为这将是一件容易的事）：

$(document).ready(function(){
  $('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
});

这是一个小提琴： Hide elements who have class

Answer 1

你正在寻找的东西可能更像是这样。（代码中包含的解释/注释）

https://jsfiddle.net/p7Lvo2fd/3/

$(document).ready(function(){
  $('input[type="checkbox"]').click(function(){

    //Show all articles
    $("article").show();

    //Get checked boxes
    var $checkedBoxes = $("input[type=checkbox]:checked");

    //For each checked box, hide the associated articles
    $checkedBoxes.each(function() {
        $("article").filter("." + $(this).val()).hide();
    });

  });
});

或者如果你更喜欢一个片段：

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    $("article").show();
    var $checkedBoxes = $("input[type=checkbox]:checked");
    $checkedBoxes.each(function() {
      $("article").filter("." + $(this).val()).hide();
    })
  });
});

article {
  color: #fff;
  padding: 10px;
  margin-top: 10px;
  font-size: 20px;
  font-family: Roboto;
  background: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" name="incredientsCheckbox" value="dynamite"> dynamite</label>
  <label><input type="checkbox" name="incredientsCheckbox" value="chocolate"> chocolate</label>
  <label><input type="checkbox" name="incredientsCheckbox" value="strawberry"> strawberry</label>
  <label><input type="checkbox" name="incredientsCheckbox" value="cheese"> cheese</label>
</div>

<article class="strawberry dynamite"><strong>classes:</strong> dynamite - strawberry</article>
<article class="strawberry chocolate"><strong>classes:</strong> strawberry - chocolate</article>
<article class="strawberry"><strong>classes:</strong> strawberry</article>
<article class="cheese"><strong>classes:</strong> cheese</article>
<article class="cheese dynamite strawberry"><strong>classes:</strong> cheese - dynamite - strawberry</article>

为了更清晰的实现，您还可以看到此示例：https://jsfiddle.net/p7Lvo2fd/5/

它会更改背景而不是隐藏项目，因此更容易测试。

Answer 2

将这些开关添加到CSS

.dynamite_hide {display: none}
.strawberry_hide {display: none}
.chocolate_hide {display: none}
.cheese_hide {display: none}

将您的点击处理程序更改为此

$(document).ready(function(){
 $('input[type="checkbox"]').click(function(){
    var val = $(this).attr("value")
    if($(this).is(':checked'))
      $("." + val).addClass(val+"_hide")
    else
      $("." + val).removeClass(val+"_hide")
  });
});

Answer 3

您将要在更改上执行此操作，而不是单击事件 - 如果您通过脚本进行更改，则可以这样做。如果您有预设值，则可以在启动时触发更改。

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    var checks = $('input[type="checkbox"]:checked');
    //show all then hide checked stuff
    $('article').show();
    checks.each(function(index, item) {
      $('article').filter(function() {
        return $(this).hasClass($(item).val());
      }).hide();// hit DOM once, hide them
    });
  }).trigger("change");
});

较小的过滤器，但做同样的事情：

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    var checks = $('input[type="checkbox"]:checked');
    //show all then hide checked stuff
    $('article').show();
    checks.each(function(index, item) {
      $('article').filter("."+item.value).hide();
    });
  });
});

效率最高：

现在我们理解了这个概念，我们可以将一个类列表作为一个选择器列表并使用它，在找到的每个类上保存命中DOM：

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    var classes = $('input[type="checkbox"]:checked').map(function() {
      return "." + this.value;
    }).get().join(",");
    $('article').show().filter(classes).hide();
  }).trigger("change");
});

隐藏每个复选框（jQuery）具有所选类别之一的元素

3 个答案: