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

Question

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

我正在努力做的是创建一种“简单”的方法来显示特定的 div触发

这是代码的sn-p：

$(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 中添加的示例中，我将复选框分为两个主要类别，即 color（由：red、green、blue 和 紫色）和价格（由：“昂贵 和 便宜)

我的想法是我可能希望查看所有具有“红色”类别的物品，无论是便宜的还是昂贵的。或者，我可能希望查看部分或所有颜色，但只查看便宜的颜色。

我试图将代码减少到相当少的数量，但是有一个序列似乎使逻辑跳闸，对于我的一生，我想不出如何让它在这种情况下工作，或者我可能错过了什么。

example is located on JSFiddle 这里供人们测试：

除非你这样做：

如果重复这个顺序：
1. 关闭便宜或昂贵
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();     
    };

 });

});

这是一个有点冗长的方法，但它似乎有效.. 虽然已经发布的答案看起来都好得多。 非常感谢所有通过发布 sn-ps 和建议做出回应的人

亲切的问候

Answer 1

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

    $(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()

                }
            })
        }
    });
});

Answer 2

在这种情况下，我认为每次更改时重新计算状态是有意义的；您可以像这样在 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