隐藏和显示具有多个常见类的 div

Question

我正在尝试构建一个简单的交互，但事实证明它有点棘手，我无法做到。

我想使用一些复选框来根据不同的classes隐藏和显示不同的div。 div 中的 classes 是动态的，盒子的结构必须是这样。

在一些帮助下我有了一个可行的想法，但它有一些问题：

https://jsfiddle.net/lanweil/bq8xLxrm/ 代码在最后

如果您选中所有复选框，并且您想取消选中 RED，例如，它会隐藏包含 RED 元素的框（class 红色），但它应该隐藏包含只有红色。带有绿色和红色的框应该仍然可见。我该怎么做？
作为奖励，如果没有选中复选框，我希望所有框都可见。我发现这看起来很接近，但我无法让它在我的情况下工作。 http://jsfiddle.net/chriscoyier/BPhZe/76/

这里是基本思路的代码，HTML:

<ul>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.blue" value="blue" class="tag_checkbox blue" /> <span>BLUE</span>

        </li>
    </label>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.red" value="red" class="tag_checkbox red"> <span>RED</span>

        </li>
    </label>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.green" value="green" class="tag_checkbox green"> <span>GREEN</span>

        </li>
    </label>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.gray" value="gray" class="tag_checkbox gray"> <span>GRAY</span>

        </li>
    </label>
</ul>
<div class="box_container">
    <div class="box blue red green gray"> <span class="blue">BLUE</span><span class="red">RED</span><span class="green">RED</span><span class="gray">GRAY</span>

    </div>
    <div class="box blue green"><span class="blue">BLUE</span><span class="green">GREEN</span>

    </div>
    <div class="box blue"><span class="blue">BLUE</span>

    </div>
    <div class="box red gray"><span class="red">RED</span><span class="gray">GRAY</span>

    </div>
    <div class="box gray"><span class="gray">GRAY</span>

    </div>
    <div class="box blue green gray"><span class="blue">BLUE</span><span class="green">GREEN</span>

    </div>
    <div class="box green gray"><span class="green">GREEN</span><span class="gray">GRAY</span>

    </div>
    <div class="box red"><span class="red">RED</span>

    </div>
</div>

CSS

.box {
    /* display: block; */
    display: none;
    height: 100px;
    width: 200px;
    float: left;
    margin: 10px;
    border: 1px solid black;
}

span.blue, span.red, span.green, span.gray {
    padding: 10px;
    float: left;
}


span.blue {
    background: lightblue;
}
span.red {
    background: red;
}
span.green {
    background: lightgreen;
}
span.gray {
    background: lightgray;
}

JS

$(document).ready(function () {
    $("input:checkbox").change(function (value) {
        var $this = $(this);
        var box = $($this.attr('rel'))

        box.toggle(this.checked);
    });
});

Answer 1

操作方法如下：

$(document).ready(function () {
    $("input:checkbox").change(function (value) {
        if($(this).is(':checked')) {
            $($(this).attr("rel")).show();
        } else {
            $($(this).attr("rel")).hide();

            $("input:checked").each(function() {
                $($(this).attr("rel")).show();
            });
        }
    });
});

当一个复选框被选中时，我会显示所有带有 class 颜色的框。取消选中后，首先我取消选中具有该颜色的框，然后，我重新显示所有具有其他选中输入颜色的框。这只是第一个请求。

工作 jsfiddle：

https://jsfiddle.net/bq8xLxrm/24/

隐藏和显示具有多个常见类的 div

Hide and show divs with multiple common classes

css

checkbox

jquery

隐藏和显示具有多个常见 类 的 div

Hide and show divs with multiple common classes

css

checkbox

jquery

隐藏和显示具有多个常见类的 div