首页 > 解决方案 > 如何检查不被jquery隐藏的复选框

问题描述

我有这些复选框

    <input type='checkbox' class="catagory region-1"/> 
        <ul>
            <li>1
                <input type='checkbox' class="catagory region-1" />
                <ul>
                    <li>2
                        <input type='checkbox' class="catagory region-1" />
                    </li>
                </ul>
            </li>
           <li>1
                <input type='checkbox' class="catagory region-1" />
                <ul>
                    <li>2
                        <input type='checkbox' class="catagory region-1" />
                    </li>
                    <li>2
                        <input type='checkbox' class="catagory region-2" />
                    </li>
                    <li>2
                        <input type='checkbox' class="catagory region-2" />
                    </li>
                </ul>
            </li>
        </ul>

   

$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });
});
li ul {
    padding-left: 25px;
    border: none;
    display:block;
}
ul {
    border: 2px solid blue;
    padding: 5px;
    margin:5px;
    display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我已经编写了一个 jquery 函数来使用类过滤器功能按类别过滤复选框,过滤的一个将被显示,其他的将被隐藏。所以我想编写一个函数来检查所有当前未隐藏的复选框。

标签: jqueryhtml

解决方案


在过滤您的复选框后调用它:

$('input:checkbox:visible').prop('checked', true);

这将检查所有可见的复选框。

您可以添加属性等于选择器:

$("input:checkbox:visible[thetype='customcheck']").prop('checked', true);

推荐阅读