Question

似乎很少有div被隐藏并通过复选框显示的例子，但我一直在努力找到一个解决它的方法，就像我试图做的那样。

我正在努力做的是创建一种“简单”的方式来显示特定的div，基于是否已将一组类应用于不同的div，然后根据某些复选框是否隐藏或显示这些相同的div触发

这是代码的片段：

$(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中添加的示例中，我将复选框分为两个主要类别，即颜色（由 红色，绿色，蓝色组成） 和紫色）和价格（由以下各项组成：“ 昂贵< / em> 和便宜）

我的想法是，我可能希望查看所有具有“红色”类别并且既便宜又昂贵的物品。或者，我可能希望查看一些或所有颜色，但只查看便宜的颜色。

我试图将代码减少到相当小的数量但是有一个序列似乎正在绊倒逻辑并且对于我的生活我想不出如何让它在这一个场景中工作或者我可能错过了什么。

此处example is located on JSFiddle供人们测试：
除非你这样做，
除外：

如果重复此顺序：
1.关闭便宜或昂贵
2.关闭其中一种颜色
3.现在打开相同的颜色

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

其他所有组合似乎都有效，我希望写的是最简单的方法，但显然缺少一些东西，我不明白为什么它没有给我我想要的结果。因此，如果有人对我错过的内容有任何想法，那么我肯定会感谢你的帮助。

虽然我在等待，但我还有另外一个，并将show hide扩展为简单的直接块...我所做的就是从显示所有内容开始，然后隐藏每个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();
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

选中所有框后，生成的过滤器将为：

.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？

2 个答案: