Javascript 复选框筛选按类显示的多个类的div

我有这个

JS

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('#main-div > div > div > div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('#main-div > div > div > div[class=' + this.id + ']').show();
        });
    } else {
        $('#main-div > div > div > div').show();

}
});

HTML：

<input type="checkbox" id="one">
<input type="checkbox" id="two">
<input type="checkbox" id="three">

<div id="main-div">
<div>
<div>
<div class="one two other classes">
Content
</div>
</div>
</div>
</div>

<div id="main-div">
<div>
<div>
<div class="one three other classes">
Content
</div>
</div>
</div>
</div>

<div id="main-div">
<div>
<div>
<div class="two three other classes">
Content
</div>
</div>
</div>
</div>

---

您可能不想在这里使用属性选择器，因为它将查找精确的文本。您将希望改用类选择器，它将只查找类的存在，而不考虑其他类的存在

$('#main-div > div > div > div.' + this.id).show();

我还建议不要像现在这样使用嵌套的直接子选择器（

div>div>div

）。这是非常脆弱的，当您更改HTML层次结构时，它会破坏您的HTML层次结构，这对您重构时将是痛苦的

像这样可能更好：

$('#main-div .' + this.id).show();

---

话虽如此，您也永远不希望在页面上重复使用ID，id“在文档中必须是唯一的”。如果要使用

getElementById

，它将只返回找到的第一个项，而不是一个项数组<在这种情况下，code>main div可能应该是一个类

查看此更新的小提琴；我想这是你想要的

您不应该有多个具有相同id的项，所以我只是将id=“main div”的div更改为class=“main”，并将其放入每个循环中的选择器中。我还将代码更改为不使用this对象（尽管它产生了正确的结果），我只使用了每个回调的参数。

您可以使用

map（）

创建选中输入

id

的数组，然后使用

*

包含属性选择器来显示/隐藏该类的div

 $('input[type="checkbox"]').click(function() {
                if ($('input[type="checkbox"]:checked').length > 0) {
                    $('#main-div > div > div > div').hide();
                    $('input[type="checkbox"]:checked').each(function () {
                        var showId = this.id;
                        $('div.' + showId).show();
                    });
                } else {
                    $('#main-div > div > div > div').show();

                }
            });

另外，作为旁注，您不能拥有相同的

id

$（'input[type=“checkbox”]”）。更改（函数（）{
//创建已检查输入ID的数组
var c=$（'input[type=“checkbox”]：checked'）.map（函数（）{
返回$（this.attr（'id'）；
}).get（）；
//首先显示所有div
$（“.1、.2、.3”）.show（）；
//在选中输入数组中具有类作为值的ForEach div将其隐藏
c、 forEach（函数（e）{
$（'div[class*=“'+e+'“]'）。hide（）；
})
})

A.
B
C

您有多个问题

您在标记中重复一个无效的HTML id，这将导致难以调试的意外问题

在修复了重复id的问题后，您需要使用一个类或将它们全部包装在某个具有id的容器中

如果使用完全匹配的属性选择器，请将其更改为使用类选择器：（在修复id问题并将其全部包装后）

选择器代码：

$('#main-div').find('div').filter('.' + this.id ).show();

或

---

我还建议您研究选中/未选中的问题，以及根据选中值确定应显示/隐藏哪些内容的兄弟姐妹…我将由您决定，但这将涉及复选框更改事件。请注意，当您有复选框时，所有未选中的都将显示所有内容，不确定这是否是您的愿望。

hink这将起作用，澄清一下，使用该ID的div是一个包含所有其他div的单独div，我的缺点是我这样做了，谢谢：）也许与重构一样重要的是，第二个选择器将实际执行得更好，甚至比

$（'#main div'）.find（'.+this.ID）.show（）更好由于sizzle引擎中从右到左的选择器处理（这使得第一个/嵌套的选择器处理速度要慢得多），尽管这实际上是典型DOM上的微观优化。
 $('input[type="checkbox"]').click(function() {
                if ($('input[type="checkbox"]:checked').length > 0) {
                    $('#main-div > div > div > div').hide();
                    $('input[type="checkbox"]:checked').each(function () {
                        var showId = this.id;
                        $('div.' + showId).show();
                    });
                } else {
                    $('#main-div > div > div > div').show();

                }
            });

$('#main-div').find('div').filter('.' + this.id ).show();

$('#main-div').find('div.' + this.id ).show();