質問: ### 前提・実現したいこと jQueryで複数(20個)の個別のチェックボックスの値を取得して、別の個別要素(個別のチェックボックスに対応したアイコン≠label)の状態を変えたい。 ### 発生している問題・エラーメッセージ 上記を実現するために下記の`if`で回していく方法を思いついたのですが、これだと`if`を20回繰り返す無駄に長いコードになってしまいます。 ### 該当のソースコード ``` チェックボックス1 チェックボックス2 チェックボックス3 ... アイコン アイコン アイコン ... ``` ``` $(function(){ $('input[type="checkbox"]').change(function(){ if $("input[id='check1']:checked") { $("#icon1").addClass('selected'); } if $("input[id='check2']:checked") { $("#icon2").addClass('selected'); } ... }); }); ``` ### 試したこと 他には(カスタム)data属性を使用する方法(classに `plan-checker` がついている要素は中身が変更されるたびに `function` を実行して値をチェックして空かどうかを調べ自身の属性 `data-plan-flag="hoge"` の中身の `hoge` を使ってアイコンの `data-plan-chack="hoge"` と付き合わせて同じ値の入っているものをselectedにする。)などもあること思いますが、これも処理が重くなってしまいそうな気が... 初歩的な質問で申し訳ございませんが何かいいアイデアがございましたらアドバイスを頂きたく存じます。 よろしくお願いいたします。
回答: CSSで処理する方法とJavaScriptで処理する方法。CSSはチェックボックスの位置をちょっと工夫する必要があるから無理があるが、他に出ていない方法ということで。 ``` チェックボックス1 チェックボックス2 チェックボックス3 icon1 icon2 icon3 ``` ``` #check1:checked ~ aside #icon1, #check2:checked ~ aside #icon2, #check3:checked ~ aside #icon3 { background-color: red; } /* CSSで#iconのスタイルを変更 */ .selected { color: blue; } /* JavaScript用 */ ``` ``` $( function() { $( 'input[type="checkbox"][data-target^="#icon"]' ).click( function() { var flag = ( $( this ).prop( 'checked' ) ) ? 'addClass' : 'removeClass'; $( $( this ).attr( 'data-target' ) )[ flag ]( 'selected' ); } ).click(); } ); ``` **動くサンプル:**