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) |
