Question

我有一个汽车列表，如：（简化，当然）

<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时，即使它没有图像，也会显示第四辆车。

我如何克服这个问题？

Answer 1

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

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

FIDDLE

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

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

Answer 3

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

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

Answer 4

每次勾选复选框时都可以运行相同的功能，该功能可以获取所有选中的复选框并应用过滤器。给他们上课。

$(".checkbox:checked").each(function(){
    //probably start with a helper function to show all
    //then hide the ones you want to hide.
});

如何为jQuery中的项列表创建过滤器？

4 个答案: