Javascript JQuery选择性隐藏不起作用

我试图创建一个菜单，其中每个元素都有自己的复选框。选择“排序”按钮（现在这里是复选框）时，菜单应仅显示已激活复选框的元素（通过手动单击元素的复选框并保持其活动状态来完成）

这是我的HTML代码

    <input type= "checkbox" class="toggler" id="clicked" onclick="tclick()" >click here to sort 

  <p><input type="checkbox"  id="inactive" onClick="but_clicked()">Hello1</p>
<p><input type="checkbox"  id="inactive" onClick="but_clicked()">Hello2</p>
<p><input type="checkbox"  id="inactive" onClick="but_clicked()">Hello3</p>

---

但是，当我设置

单击此处排序

复选框时，其他复选框不会被隐藏，无论它们的每个复选框状态如何。我觉得我犯了一个非常愚蠢的错误，请帮助。

在html中传入元素本身this

this

，然后在javascript中使用该参数，而不是this。您还需要将

.is

与

:checked

选择器一起使用，而不是仅单击

。我还将changed

.changed（）

更改为

.clicked（）

，因为它们在本例中是相同的事件。您可能还想考虑将< <代码> ID >代码> > < <代码> >代码>活动< /代码>为<代码>类< /代码>，因为所有<代码> ID <代码> s必须是唯一的。

函数，但单击（e）{
如果（e.id==“活动”）{
e、 id=“非活动”；
控制台日志（e.id）；
}否则{
e、 id=“活动”；
控制台日志（e.id）；
}
}
函数tclick（e）{
如果（e.id==“点击”）{
e、 id=“空”；
控制台日志（e.id）；
}否则{
e、 id=“单击”；
控制台日志（e.id）；
}
}
$（文档）.ready（函数（）{
$（'.toggler'）。单击（函数（）{
如果（$（'.toggler'）。是（':checked'））{
$（“#不活动”）.hide（）；
$（“#活动”）.show（）；
}否则{
$（“#活动”）.show（）；
$（“#不活动”）.show（）；
}
});
});

单击此处进行排序
你好

你好

Hello3
首先
id
property必须在DOM中是唯一的，因此不能有多个id为active或inactive的元素

这是主要问题，因为
$（“#inactive”）
将只返回它匹配的第一个元素（因为它应该是唯一的）

此外，复选框有一个
checked
属性，表示它们是否被选中，因此您的所有代码都可以检查它，而不是一直更改
id

最后，您应该为文本使用
label
标记，而不是
p
，这样单击文本也会选中/取消选中复选框

（哦，
.toggler
复选框实际上是过滤而不是排序其他复选框）

因此，考虑到所有问题，您可以将代码简化为


$（文档）.ready（函数（）{
$（'.toggler'）.change（函数（）{
如果（选中此项）{
$（'.grouped'）.parent（）.hide（）；
$（'.grouped:checked'）.parent（）.show（）；
}否则{
$（'.grouped'）.parent（）.show（）；
}
})
});
label{display:block；}

单击此处进行筛选

你好
你好
Hello3
通过一些小技巧，您的代码可以变得更简单

首先，不要在运行时更改ID，这是一种糟糕的做法。
复选框具有类似于选中的
的属性，当使用
此项进行测试时，其计算结果为
false
或
true
。选中的

<input type= "checkbox" class="toggler" id="click_to_toggle" >click here to toggle 
<p class="item"><input type="checkbox" >Hello1</p>
<p class="item"><input type="checkbox" >Hello2</p>
<p class="item"><input type="checkbox">Hello3</p>

工作小提琴
无需使用
道具
<代码>这个。勾选
会直接导致
true
/
false
。到底有多快？这不是速度的问题（如果你每秒钟做上千次，速度会快得多），但它更干净/更简单（在我看来）。它在小提琴中工作，但在我的应用程序中不起作用？Chrome console没有显示任何错误，因为主要问题是
$（'#inactive'）
和
$（'#active'）
将始终最多返回1个元素，因为
id
必须是唯一的。是的，这就成功了。谢谢我以前尝试过
checked
属性，但它也不起作用。现在我看到我有一个轻微的语法错误。谢谢你的帮助！
<input type= "checkbox" class="toggler" id="click_to_toggle" >click here to toggle 
<p class="item"><input type="checkbox" >Hello1</p>
<p class="item"><input type="checkbox" >Hello2</p>
<p class="item"><input type="checkbox">Hello3</p>

$('#click_to_toggle').on('change', function(){
    if( this.checked ){
        $('.item').hide();
        $('.item input:checked').each(function(){
            $(this).closest('.item').show();
        });
    } else {
        $('.item').show();
    }
});