如何使用具有特定條件的復選框顯示隱藏和隱藏div？

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中添加的示例中，我將復選框分為兩個主要類別，分別是顏色 （由紅色，綠色，藍色和紫色組成 ）和價格 （由以下元素組成：“ 昂貴和便宜 ）

我的想法是，我希望查看所有帶有“紅色”類別的商品，無論價格便宜還是昂貴。 另外，我可能希望查看部分或全部顏色，但僅查看便宜的顏色。

我試圖將代碼縮減到相當少的數量，但是似乎有一個順序似乎在破壞邏輯，對於我的一生來說，我不認為如何在這種情況下或如何使它工作錯過了。

該示例位於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();     
    };

 });

});

這樣做花了很長的時間，但似乎可行。.盡管已發布的答案看起來都好得多。 非常感謝所有通過發布摘要和建議做出回應的人

親切的問候

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

                }
            })
        }
    });
});