###前提・実現したいこと
jQueryで複数(20個)の個別のチェックボックスの値を取得して、別の個別要素(個別のチェックボックスに対応したアイコン≠label)の状態を変えたい。
###発生している問題・エラーメッセージ
上記を実現するために下記のif
で回していく方法を思いついたのですが、これだとif
を20回繰り返す無駄に長いコードになってしまいます。
###該当のソースコード
HTML
1<main> 2 <input type="checkbox" value="チェックボックス1" id="check1"/> 3 <label for="check1"> チェックボックス1 4 </label> 5 <input type="checkbox" value="チェックボックス2" id="check2"/> 6 <label for="check2">チェックボックス2</label> 7 <input type="checkbox" value="チェックボックス3" id="check3"/> 8 <label for="check3">チェックボックス3</label> 9 ... 10</main> 11<aside> 12 <ul> 13 <li><span class="icon" id="icon1">アイコン</span></li> 14 <li><span class="icon" id="icon2">アイコン</span></li> 15 <li><span class="icon" id="icon3">アイコン</span></li> 16 ... 17 </ul> 18</aside>
javascript
1$(function(){ 2$('input[type="checkbox"]').change(function(){ 3 if $("input[id='check1']:checked") { 4 $("#icon1").addClass('selected'); 5 } 6 if $("input[id='check2']:checked") { 7 $("#icon2").addClass('selected'); 8 } 9... 10 }); 11});
###試したこと
他には(カスタム)data属性を使用する方法(classに plan-checker
がついている要素は中身が変更されるたびに function
を実行して値をチェックして空かどうかを調べ自身の属性 data-plan-flag="hoge"
の中身の hoge
を使ってアイコンの data-plan-chack="hoge"
と付き合わせて同じ値の入っているものをselectedにする。)などもあること思いますが、これも処理が重くなってしまいそうな気が…
初歩的な質問で申し訳ございませんが何かいいアイデアがございましたらアドバイスを頂きたく存じます。
よろしくお願いいたします。
回答4件
あなたの回答
tips
プレビュー