JQuery：チェックボックスで要素を絞り込み（AND検索）

チェックボックスを複数選択するとAND条件として絞り込みます。

by carl_marie

HTML

<!-- JS設定ここから -->
<script>
    // 絞り込みに使うタグ（class）を記述してください。数の上限下限はありません。
    var $chkbxFilter_tags =['living','legs','black']; 

    // 絞り込み対象の要素のHTMLタグを指定してください。（div、section、tr など）
    var $chkbxFilter_blocks = ['section']   
</script>
<!-- JS設定ここまで -->

<h1>クリックで要素の絞り込み</h1>

<!-- 絞込み要素選択ここから -->
<div id="select">
    
    <!-- 絞り込まない（全表示）ボタン -->
    <label class="selected"><input type="radio" id="all" checked="checked">絞り込まない</label>

    <!-- 絞込みに使うタグをidとして指定します -->
    <label><input type="checkbox" id="living" class="sort">生物(living)</label>
    <label><input type="checkbox" id="legs" class="sort">足がある(legs)</label>
    <label><input type="checkbox" id="black" class="sort">黒い(black)</label>

</div>
<!-- 絞込み要素選択ここまで -->


<!-- 絞込まれる要素ここから -->
<div id="result">
    
    <!-- 絞込みに使うタグをclassとして指定します -->

    <section class="living">
        <p>ヘビ　class="living"</p>
    </section>

    <section class="legs">
        <p>椅子　class="legs"</p>
    </section>

    <section class="black">
        <p>炭　class="black"</p>
    </section>

    <section class="living legs">
        <p>りす　class="living bird"</p>
    </section>

    <section class="living black">
        <p>ウニ　class="living black"</p>
    </section>

    <section class="legs black">
        <p>ピアノ　class="legs black"</p>
    </section>

    <section class="living legs black">
        <p>ヌー　class="living legs black"</p>
    </section>

    <section class="white">
        <p>紙　class="white"</p>
    </section>

</div>
<!-- 絞込まれる要素ここまで -->

CSS

/* ---------- 必須CSS ここから ------------ */

#result [class*="hidden-"] {display: none;}

/* ---------- 必須CSS ここまで ------------ */


/* ここから下は見た目の調整 */
#select {margin-bottom: 1em;}
#result section{border: 1px solid #888; padding: 5px;}
#result section p{margin: 0px;}

#select label.selected {background-color: #fcc;} /* 選択中のラベルのスタイルを変更 */

JavaScript

$(function (){
    var $chkbxFilter_all = $('#all');

    //絞り込まないボタンをクリック時にチェックボックスをオフにする
    $chkbxFilter_all.click(function() {
		  $(".sort").prop('checked',false);
		  $chkbxFilter_all.prop('checked',true);
    });
    
    //チェックボックスがクリックされた時の動作
    $("#select label input").click(function() {
        
        $(this).parent().toggleClass("selected");
        
        $.each($chkbxFilter_tags, function() {
            if($('#' + this).is(':checked')) {
                         $("#result " + $chkbxFilter_blocks + ":not(." + this + ")").addClass('hidden-not-' + this);
                         $chkbxFilter_all.prop('checked',false).parent().removeClass("selected");
                }
            else if($('#' + this).not(':checked')) {
                         $("#result " + $chkbxFilter_blocks + ":not(." + this + ")").removeClass('hidden-not-' + this);
                }
        });
        
        //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける
        if ($('.sort:checked').length == 0 ){
            $chkbxFilter_all.prop('checked',true).parent().addClass("selected");
            $(".sort").parent().removeClass("selected");
        };
	});     
});