1

我有一个汽车清单，如下所示：（当然是简化的）

<div class="car" data-image="true" data-specs="true">
   1. BMW
</div>
<div class="car" data-image="false" data-specs="true">
   2. Mercedes
</div>
<div class="car" data-image="true" data-specs="false">
   3. Audi
</div>
<div class="car" data-image="false" data-specs="false">
   4. Jaguar
</div>

我想要的是一个将过滤汽车的复选框列表。

With image <input name="with_image" type="checkbox" />
With specs <input name="with_specs" type="checkbox" />

如果两个复选框都被勾选，我希望只显示第一辆车而隐藏其他车。

问题是，如果我只是简单地hide()和show()他们在复选框被选中或未选中时，它将不知道另一个复选框是否被选中。例如，如果我同时选中这两个复选框，则只会显示第一辆车，但当我取消选中with_specs一个时，也会显示第四辆车，即使它没有图像。

我该如何克服呢？

4

4 回答 4

3

完全动态，可以通过添加更多汽车或复选框以任何方式扩展：

$('input[type="checkbox"]').on('change', function() {
    var checks = $.map($('input[type="checkbox"]:checked'), function(el) {
        return el.name.replace('with_','');
    });

    $('.car').each(function(_,el) {
        var h = 0;
        for (var i=0; i<checks.length; i++) {
            if ( !!$(el).data(checks[i]) ) h++;
        }
        $(el).toggle(h===checks.length);
    });
});

小提琴

于 2013-07-20T20:39:50.527 回答
2 
$(':checkbox').change(function(){

  // hide all
  $('.car').hide();

  // show with image when image checkbox is checked
  if($('[name=with_image]').is(':checked'))
    $('[data-image=true]').show();

  // show with specs when specs checkbox is checked
  if($('[name=with_specs]').is(':checked'))
    $('[data-specs=true]').show();
})

闪烁可能会令人不安，我想改进一下。

于 2013-07-20T20:36:28.033 回答
2

将处理程序绑定到复选框上的更改事件，以便您可以在每次切换框时修改可见的汽车。然后，隐藏所有汽车并显示符合过滤条件的相关汽车。

$("input[type='checkbox']").change(function() {
    $cars = $("div.car").hide();
    if (this.name == "with_image" && $(this).is(":checked")) {
        $cars.filter("[data-image='true']").show();
    }
    if (this.name == "with_specs" && $(this).is(":checked")) {
        $cars.filter("[data-specs='true']").show();
    }
});
于 2013-07-20T20:37:51.353 回答
0

每次选中一个复选框时，您都可以运行相同的函数，获取所有选中的复选框并应用您的过滤器。就给他们上课吧。

$(".checkbox:checked").each(function(){
    //probably start with a helper function to show all
    //then hide the ones you want to hide.
});
于 2013-07-20T20:32:53.943 回答