回答編集履歴

1 バグ修正

NatsumiOki

NatsumiOki score 1244

2016/08/05 17:52  投稿

う~ん、こういうことでしょうか?
```
 var i,id,li,classArr,cnt;
 
 $('input[type="checkbox"]').on('change',function(){
   cnt = 0;
   id = $(this).attr('id');
   li = '.' + id;
   //チェックしたときは該当するclassを持つ要素を表示
   if($(this).prop('checked')===true) {
    $(li).css('display','block');
   }
   //チェックを外したときは
   else{
    //該当するclassを持つ要素をループ
    $.each($(li),function(){
      //今見ている要素のclass群をループ
      classArr = $(this).attr("class").split(" ");
      i = classArr.length;
      $.each(classArr,function(){
        //持っているclass群の中で、ほかにチェックされているか判定
        id = '#' + classArr[i];
        if($(id).prop('checked')===true){
          cnt++;
        }
      });
      if(cnt<1){
        $(li).css('display','none');
      }
    });
   }
 })
```
すみません、さきほど掲載したの間違えていました。
CSSのソースもつけていなかったのでわかりにくかったと思います。
ちょっとわかりやすいように横並びに変えちゃいましたがこんな感じでしょうか?
[サンプル](http://codepen.io/mayo31/pen/XKxzzV)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る