Question

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

目前我正在通过首先隐藏所有<li>然后取消隐藏具有选中复选框的选项来实现它，如下所示：

$("#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

我建议使用filter功能来实现此目的;

$('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");

选择所有没有选中复选框的<li> </li>

3 个答案: