如何使用具有特定条件集的复选框显示隐藏和隐藏 div？

Question

似乎很少有 div 被隐藏和通过复选框显示的例子，但我一直在努力寻找一个以与我试图做的完全相同的方式解决它的例子。

我正在努力做的是创建一种 'simple' 显示特定 div 的方式，该方法基于是否已将一组 class 应用于不同的 divs，然后根据是否触发某些复选框来隐藏或显示相同的 divs

这是代码片段：

$(document).ready(function () {

$("input[type=checkbox]").change(function () {
    var divId = $(this).attr("id");
    if ($("#expensive").is(":checked") && $(this).is(":checked") || $("#cheap").is(":checked") && $(this).is(":checked")) {
        $("." + divId).show();
    } else {
        $("." + divId).hide();
    };

在我添加到 JSFiddle 的示例中，我将复选框分为两个主要类别，即颜色（由以下部分组成：红绿蓝和紫色)和价格（由：“昂贵的和便宜的组成)

我的想法是，我可能希望查看 class 或 "red" 的所有商品，无论是便宜的还是昂贵的。或者，我可能希望查看部分或所有颜色，但只查看便宜的颜色。

我试图将代码减少到相当小的数量，但是有一个序列似乎在破坏逻辑，对于我来说，我想不出如何让它在这个序列中工作场景或我可能错过的内容。

example is located on JSFiddle这里供大家测试：

有效，除非你这样做：

如果重复这个序列：
1. 关闭 cheap 或 expensive
2. 关闭其中一种颜色
3. 现在打开相同的颜色

结果是您再次点击的颜色同时显示廉价和昂贵，即使其中一个复选框已关闭。

所有其他组合似乎都有效，我希望所写的是最简单的方法，但显然缺少某些东西，我不明白为什么它没有给我想要的结果。因此，如果有人对我遗漏的内容有任何想法，那么我将不胜感激。

在我等待的同时，我又尝试了一下，将显示隐藏扩展为简单直接的块...我所做的是从显示所有内容开始，然后隐藏每个 div 如果它是受相关复选框的影响。

$(document).ready(function() {

 $("input[type=checkbox]").change(function() {
    var divId = $(this).attr("id");
    $("." + divId).show();

    if (!$("#expensive").is(":checked")){
        $(".expensive").hide();
    };

    if (!$("#cheap").is(":checked")){
    $(".cheap").hide();     
    };

    if (!$("#cheap").is(":checked")){
    $(".cheap").hide();     
    };

    if (!$("#red").is(":checked")){
    $(".red").hide();       
    };

    if (!$("#blue").is(":checked")){
    $(".blue").hide();      
    };

    if (!$("#purple").is(":checked")){
    $(".purple").hide();        
    };

    if (!$("#green").is(":checked")){
    $(".green").hide();     
    };

 });

});

这样做有点冗长，但它似乎有效.. 尽管已发布的答案看起来都好得多。非常感谢所有通过发布片段和建议做出回应的人

亲切的问候

Answer 1

在这种情况下，我认为每次更改时重新计算状态是有意义的；您可以像这样在 jQuery 中动态构建过滤条件：

$(document).ready(function () {
    var $boxes = $('input[type=checkbox]');

    $boxes.on('change', function() {
        var sel = $boxes.filter(function() {
            return this.checked;
        }).map(function() {
            return '.' + this.value;
        }).get().join(',');

        $('.box')
            .hide()
            .filter(sel)
            .show();
    });
});

$(document).ready(function () {
    var $boxes = $('input[type=checkbox]');

    $boxes.on('change', function() {
        var sel = $boxes.filter(function() {
            return this.checked;
        }).map(function() {
            return '.' + this.value;
        }).get().join(',');

        $('.box')
            .hide()
            .filter(sel)
            .show();
    });
});

.box {
        padding: 20px;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red {
        background: #ff0000;
    }
    .green {
        background: #00ff00;
    }
    .blue {
        background: #0000ff;
    }
    .purple {
        background: purple
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label>
        <input id="red" type="checkbox" name="colorCheckbox" value="red" checked>red</label>
    <label>
        <input id="purple" type="checkbox" name="colorCheckbox" value="purple" checked>purple</label>
    <label>
        <input id="green" type="checkbox" name="colorCheckbox" value="green" checked>green</label>
    <label>
        <input id="blue" type="checkbox" name="colorCheckbox" value="blue" checked>blue</label>
    <label>
        <input id="cheap" type="checkbox" name="colorCheckbox" value="cheap" checked>cheap</label>
    <label>
        <input id="expensive" type="checkbox" name="colorCheckbox" value="expensive" checked>expensive</label>
</div>
<div class="red expensive box">You have selected <strong>red checkbox and EXPENSIVE </strong> so i am here</div>
<div class="green cheap box">You have selected <strong>green checkbox and CHEAP</strong> so i am here</div>
<div class="green expensive box">You have selected <strong>green checkbox and Expensive</strong> so i am here</div>
<div class="blue cheap box">You have selected <strong>blue checkbox and CHEAP</strong> so i am here</div>
<div class="blue expensive box">You have selected <strong>blue checkbox and EXPENSIVE</strong> so i am here</div>
<div class="purple expensive box">You have selected <strong>purple checkbox and EXPENSIVE</strong> so i am here</div>
<div class="red cheap box">You have selected <strong>red checkbox and CHEAP</strong>so i am here</div>

选中所有框后，生成的过滤器将是这样的：

.red,.purple,.green,.blue,.cheap,.expensive

Answer 2

最简单的方法 - 将两个类别分开，只在必要时检查...

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

        var divId = $(this).attr("id"),
                color = ['red', 'green', 'blue', 'purple'],
                price = ['cheap', 'expensive'],
                cat = $.inArray(divId, price) == -1 ? price : color;


        if (!$(this).is(":checked")) {
            $('div.' + divId).hide()
        } else {
            $.each(cat, function (i, ele) {
                if ($('#' + ele).is(':checked')) {
                    $('div.' + divId + '.' + ele).show()
                } else {
                    $('div.' + divId + '.' + ele).hide()

                }
            })
        }
    });
});

如何使用具有特定条件集的复选框显示隐藏和隐藏 div？

How to show hide and hide divs using checkboxes with a certain set of conditions?

javascript

jquery

html

checkbox

input-filtering