CSSの:checked疑似クラスと間接セレクタを使って、要素の表示非表示を切り替えます。

サンプルは、次の特徴のうち複数を有した8店舗の架空の飲食店を想定しています。
・駐車場あり、・Free Wi-Fiあり、・席数60以上、・交通系電子マネー対応、・全面禁煙
5つの特徴のcheckboxをオンにすると、それに合致した店舗を下側に表示します。

CSSのしくみは、checkboxがオンでないとき、間接セレクタを使って、対応するp要素でクラス名に「con1」から「con5」までを持つものをひとつずつ非表示にし、checkboxがオンになったとき、その逆の手順で表示するようにしています。なお、checkboxを複数オンにしたand（絞り込み）には対応していません。また、表示される店舗名の右側の色付きの円は、有している特徴を分かりやすくするための画像です。

 

htmlソース（一部）

<input type="checkbox" class="con11">駐車場あり<span class="color1">●</span><br>
<input type="checkbox" class="con22">Free Wi-Fiあり<span class="color2">●</span><br>
<input type="checkbox" class="con33">席数60以上<span class="color3">●</span><br>
<input type="checkbox" class="con44">交通系電子マネー対応<span class="color4">●</span><br>
<input type="checkbox" class="con55">全面禁煙<span class="color5">●</span><br>
<p class="con4 con5">新橋駅前店<img src="img3/c-dot45.png"></p>
<p class="con1 con3">高井戸店<img src="img3/c-dot13.png"></p>
<p class="con1 con2">中野坂上店<img src="img3/c-dot12.png"></p>
<p class="con2 con4">代々木駅前店<img src="img3/c-dot24.png"></p>
<p class="con2 con3 con5">中目黒店<img src="img3/c-dot235.png"></p>
<p class="con1 con4 con5">西日暮里店<img src="img3/c-dot145.png"></p>
<p class="con1 con3">江戸川橋店<<img src="img3/c-dot13.png"></p>
<p class="con2 con3 con4">秋葉原本店<img src="img3/c-dot234.png"></p>

CSSソース

.con11:not(:checked) ~ .con1  {
	display: none;
	}
.con22:not(:checked) ~ .con2  {
	display: none;
	}
.con33:not(:checked) ~ .con3  {
	display: none;
	}
.con44:not(:checked) ~ .con4  {
	display: none;
	}
.con55:not(:checked) ~ .con5  {
	display: none;
	}
.con11:checked ~ .con1  {
	display: inherit;
	}
.con22:checked ~ .con2  {
	display: inherit;
	}
.con33:checked ~ .con3  {
	display: inherit;
	}
.con44:checked ~ .con4  {
	display: inherit;
	}
.con55:checked ~ .con5  {
	display: inherit;
	}