Question

复选框：

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

基本上，这应该是这样的：页面加载（没有选中复选框），所有类（标签）都应该显示。选中至少1个复选框时，除隐藏的类外，每个类都应隐藏示例：未选中复选框 - ＆gt;应该展示挑战者，大师，平台和银类主检查 - ＆gt;大师班应该表明，其他人应该隐藏主人和银检查 - ＆gt;主人和银子应该显示，其他人应该隐藏。

现在发生了什么：当没有检查时，显示所有（应该发生）。当选择某些东西时，也会显示所有（不应该发生）。

需要帮助谢谢！

保持谨慎：复选框的值对具有相同名称的类做出反应，尽管类不是这样编写的，它们是使用带有.addClass的JavaScript添加的（＆＃39;例如，挑战者＆＃39; ）。
这可能会产生影响（？）

Answer 1

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

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

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

fiddle

过滤复选框以显示其课程不起作用

1 个答案: