Javascript 筛选复选框以显示其类不'；行不通

复选框：

    <div class="categs" id="filters">

                <div class="categhead">
                    <p>Ranking</p>
                </div>
                <div class="categsort">
                    <input type="checkbox" id="tagchallenger" value="challenger">
                    <label for="tagchallenger">Challenger</label>
                </div>

                <div class="categsort">
                    <input type="checkbox" id="tagmaster" value="master">
                    <label for="tagmaster">Master | Diamond</label>
                </div>
                <div class="categsort">
                    <input type="checkbox" id="tagplat" value="plat">
                    <label for="tagplat">Platinum | Gold</label>
                </div>

                <div class="categsort">
                    <input type="checkbox" id="tagsilver" value="silver">
                    <label for="tagsilver">Silver | Bronze</label>
                </div>
    </div>

排名

挑战者
钻石大师
铂金
银青铜

JAVASCRIPT:

                <script type="text/javascript">

                [].forEach.call(document.querySelectorAll('.hide-checkbox'), function(element) {
                    element.style.display = 'none';
                });
                var streameach = $('.streampic .row .col-md-4');

                function updateContentVisibility(){
                    var checked = $('#filters :checkbox:checked');
                    if(checked.length){
                        streameach.hide();
                        checked.each(function() {

                            $("." + $(this).val()).show();
                        });

                    } else {
                        streameach.show();
                    }
                }

                $('#filters :checkbox').click(updateContentVisibility);
                updateContentVisibility();


                </script>

[].forEach.call（document.querySelectorAll（'.hide checkbox'），函数（元素）{
element.style.display='none'；
});
var streameach=$（'.streampic.row.col-md-4'）；
函数updateContentVisibility（）{
var checked=$（“#过滤器：复选框：选中”）；
如果（选中。长度）{
streameach.hide（）；
选中。每个（函数（）{
$（“+$（this.val（））.show（）；
});
}否则{
streameach.show（）；
}
}
$（“#过滤器：复选框”）。单击（updateContentVisibility）；
updateContentVisibility（）；

基本上，它应该是这样的： 页面加载（未选中复选框）时，应显示所有类（标记）。选中至少1个复选框时，除选中的类外，每个类都应隐藏。
示例：未选中复选框->应显示挑战者、大师、平板和银牌职业。
主类已选中->主类应显示，其他类应隐藏。
已选中大师和银牌->大师和银牌应显示，其他人应隐藏。

现在发生的情况：如果未选中任何内容，则显示所有（应该发生的）。选择somethings时，还显示all（不应发生）

需要帮助，谢谢

---

请记住：复选框的值对具有相同名称的类作出反应，尽管这些类的编写方式不同，但它们是使用带有.addClass（“例如challenger”）的JavaScript添加的
这可能会产生影响（？）

不确定我是否正确理解了您的问题。但是，如果要在选中复选框时隐藏所有其他复选框（及其标签），可以尝试以下操作：

$("input:checkbox").change(function () {
$("input:checkbox").parent().not($(this).parent())
    .toggle();
});

基本上隐藏包含复选框的div。除了被检查的那个

---

在jsfiddle.net中创建复制问题的演示。脚本中的许多选择器不会显示在所示的html中。如果此代码运行时它们不存在，则无法运行。脚本标记在页面中的这些元素之前还是之后？@charlietfl编辑了id，这是一个错误。脚本标记位于页脚的后面。这些选择器确实存在，我认为并没有必要显示。若代码和html不匹配，我们如何评估问题。仍然存在html中不存在的类