3

それぞれにチェックボックスが付いたリストがあり、チェックボックスがオンになっていない<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");
 });
4

3 に答える 3

4 
$('#categoryList li > input[type="checkbox"]')
    .not(":checked")
    .parent()
    .addClass("searchhide");
于 2013-02-05T11:54:30.010 に答える
1

この目的のためにフィルター関数を使用することをお勧めします。

$('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>
于 2013-02-05T12:05:55.410 に答える
0

デモ： http： //jsbin.com/usepob/2/

 $('#categoryList li :checkbox:not(:checked)').parent().addClass("searchhide");
于 2013-02-05T12:11:54.123 に答える