jquery - 全选没有选中的复选框

Question

我有一个<li>s 列表，其中每个都有一个复选框，我想隐藏所有<li>没有选中复选框的 s 。

目前我正在通过首先隐藏所有<li>s 然后取消隐藏具有选中复选框的那些来做到这一点，如下所示：

$("#categoryList").find('li').each(function () {
    $(this).addClass("searchhide");
});

$("#categoryList").find("input[type=checkbox][checked]").each(function () {
    $('#id-' + $(this).attr('rel')).removeClass("searchhide");
});

但难道不能以更直接的方式做到这一点，只隐藏那些首先需要隐藏的东西吗？

 $("#categoryList").find('li').not("input[type=radio][checked]").each(function () {
     $(this).addClass("searchhide");
 });

Answer 1

$('#categoryList li > input[type="checkbox"]')
    .not(":checked")
    .parent()
    .addClass("searchhide");

Answer 2

为此，我建议使用过滤器功能；

$('ul li')
    .filter(function() {
        return $(this).find('input:checked').length == 0;
    })
    .addClass('searchhide'); // or .hide()

它只是选择所有li元素并过滤集合以仅包含那些包含未选中元素的input元素。

制作了这个简单的jsfiddle来演示该功能。

包括相关的HTML；

<ul>
    <li>A <input type="checkbox" checked="checked" /></li>
    <li>B <input type="checkbox" /></li>
    <li>C <input type="checkbox" checked="checked" /></li>
    <li>D <input type="checkbox" /></li>
    <li>E <input type="checkbox" checked="checked" /></li>
    <li>F, li without a checkbox</li>
    <li>G, multiple checkboxes
        <input type="checkbox" checked="checked" />
        <input type="checkbox" />
    </li>
    <li>H <input type="text" value="text field" /></li>
</ul>

Answer 3

演示：http: //jsbin.com/usepob/2/

 $('#categoryList li :checkbox:not(:checked)').parent().addClass("searchhide");