チェックボックスを利用した表示・非表示の切り替えについて

いろいろネットから解決策を探してみましたが、見当たらなかったのでどうかよろしくお願いいたします。現在ホームページを作成しているのですが、検索結果から地域名をクリックすると（添付画像参照）クリックした地域のみ表示されるようにしたいです。下記URLを参考に取り込んでみましたが、１つの地域まではちゃんと絞込みされて表示されるのですが２個目を選択すると全ての要素に「display: none;」が適用されてしまい表示されなくなってしまいます。
http://jsdo.it/carl_marie/jquery_hide_rows

複数の地域を選択した場合でもちゃんと表示されるようにするためには、どのような記述にしたらよいのかご教授よろしくお願いいたします。

質問者からの補足コメント

• <ul>
  <li><a href=""><label><input type="checkbox" checkd id="area1"/>久茂地</label></a></li>(以下同じように<li>～と続きます。）
  </ul>
  <a class="area1">
  <img data-src="~">
  <p class="num">[ 那覇市 / 久茂地 ]</p>
  <p class="shop-title">野菜がたっぷり入ったおいしいサンドイッチが食べれるサブウェイ。パンの種類をはじめ...</p>
  </a>（以下<a class="area2">～と続きます。)

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/10/17 15:13

• jqueryについては文字数制限にかかってしまったため、お手数ですが下記URLを確認いただければ助かります。
  http://jsdo.it/carl_marie/jquery_hide_rows
  
  不足情報があればご指摘くださいませ。以上よろしくお願いいたします。

    補足日時：2016/10/17 15:18

• 申し訳ございません。違う解釈をしておりました。
  参照先は確かに「できている例」ではあるのですが、クラスを足していって絞込みをするというような形になっています。クラスを足していくのではなく、それぞれ異なるクラス１つを割り当てて、複数選択可能という形にしたいです。例えば、久茂地（kumozi）と三原（mihara）という地域を選択したい場合、参照先の例では実現できないようです。

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/10/17 16:11

• yambejp様
  私の環境が原因でした。回答内容の通りでうまく動作しました。本当にありがとうございます。

  No.3の回答に寄せられた補足コメントです。 補足日時：2016/10/18 12:06

No.3 ベストアンサー 回答者： yambejp 回答日時： 2016/10/17 18:04

ざっと書きました

チェックボックスのvalueと同じclassを持つdiv(class=areas)の表示をきりかえます

<style>
.hide{display:none;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$('[name=x]').on('change',function(){
var flg=$(this).prop('checked');
if($(this).val()=="all"){
if(flg) $('[name=x]').not('[value=all]').prop('checked',false);
$('.areas').toggleClass('hide',!flg);
}else{
if(flg) $('[name=x][value=all]').prop('checked',false);
$('[name=x]').not('[value=all]').each(function(){
var flg=$(this).prop('checked');
$('.areas').filter('.'+$(this).val()).toggleClass('hide',!flg);
});
}
}).change();
});
</script>
<input type="checkbox" name="x" value="all">絞り込まない
<input type="checkbox" name="x" value="aaa">aaa
<input type="checkbox" name="x" value="bbb">bbb
<input type="checkbox" name="x" value="ccc">ccc
<hr>
<div class="areas aaa">aaa</div>
<div class="areas bbb">bbb</div>
<div class="areas ccc">ccc</div>

この回答へのお礼

yambejp様
御返事ありがとうございます。ご回答内容で試してみましたが、自分の環境ではうまく表示させることができませんでした。新しくhtmlファイルを作成して上記内容で試してみたところ、ちゃんとチェックボックスにチェックをいれた要素だけ表示されていたので原因は自分の説明不足か環境ではないかと思っています。もしよろしければ該当ページを直接ご確認いただけないでしょうか？直接URLを載せるのは少し抵抗がありますので、URLを記載したtxtファイルを下記にアップしましたので気が向きましたらよろしくお願いいたします。
http://xfs.jp/Z2hqA8

お礼日時：2016/10/17 19:46

No.2 回答者： yambejp 回答日時： 2016/10/17 15:45

ごめんなさい、私の理解が間違っていなければ

ご提示の参照先は「できている例」ですよね？
その例の通り、丸パクリでやればよいのではないですか？

それがうまくいないのであれば、うまくいかないソースを提示してほしいというのが
前回の回答なのですが・・・

No.1 回答者： yambejp 回答日時： 2016/10/17 14:56

チェックボックスのデータをサーバーにおくって絞込をするか

送られてきたデータをチェックボックスを元に非表示にするか
のどちらかでしょうけど、一般的には前者
後者でやるなら、それなりのソースを提示しないことには回答のしようがありません