###前提・実現したいこと
チェックボックスとリストを使用した簡単なor条件検索を作成したいと思っていますが、うまくいきません。
JSFiddleサンプル
<挙動例>
checkbox01
と checkbox02
にチェックを入れた際
・checkbox01
または checkbox02
どちらかに当てはまるli
要素は表示される。
・checkbox01
かつ checkbox02
両方に当てはまるli
要素は表示される。
・以上二つに当てはまらない(チェックされていない)li
は非表示
###該当のソースコード
html
1<input type="checkbox" id="checkbox01" data-target=".e1"/> 2<input type="checkbox" id="checkbox02" data-target=".e2"/> 3<input type="checkbox" id="checkbox03" data-target=".e3"/> 4 5<ul id="list"> 6 <li class="is-selected e1">1</li> 7 <li class="is-selected e1 e2">1,2</li> 8 <li class="is-selected e1 e3">1,3</li> 9 <li class="is-selected e2">2</li> 10 <li class="is-selected e3">3</li> 11 <li class="is-selected e2 e3">2,3</li> 12 <li class="is-selected e1 e2 e3">1,2,3</li> 13</ul>
css
1#list li { 2 display: none; 3 } 4#list .is-selected { 5 display: block; 6 }
javascript
1$(function() { 2var $checkBox = $('input[type="checkbox"]'); 3 var flag = ($checkBox.filter(':checked').length > 0) ? 'addClass' : 'removeClass'; 4 $checkBox.on("change", function() { 5 $($(this).attr('data-target'))[flag]('is-selected'); 6 }) 7});
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/17 10:33