jQueryで多数のチェックボックスの値を取得して、別要素の状態を変えたい。

Question

###前提・実現したいこと
jQueryで複数（20個）の個別のチェックボックスの値を取得して、別の個別要素（個別のチェックボックスに対応したアイコン≠label）の状態を変えたい。

###発生している問題・エラーメッセージ
上記を実現するために下記のifで回していく方法を思いついたのですが、これだとifを20回繰り返す無駄に長いコードになってしまいます。

###該当のソースコード

<main>
  <input type="checkbox" value="チェックボックス1" id="check1"/>
  <label for="check1"> チェックボックス1
  </label>
  <input type="checkbox" value="チェックボックス2" id="check2"/>
  <label for="check2">チェックボックス2</label>
  <input type="checkbox" value="チェックボックス3" id="check3"/>
  <label for="check3">チェックボックス3</label>
  ...
</main>
<aside>
  <ul>
    <li><span class="icon" id="icon1">アイコン</span></li>
    <li><span class="icon" id="icon2">アイコン</span></li>
    <li><span class="icon" id="icon3">アイコン</span></li>
    ...
  </ul>
</aside>

$(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にする。）などもあること思いますが、これも処理が重くなってしまいそうな気が…

初歩的な質問で申し訳ございませんが何かいいアイデアがございましたらアドバイスを頂きたく存じます。
よろしくお願いいたします。

Comments

[kei344]

check1/icon1のように全て1対1の関係でしょうか。また、HTMLも質問文に追記いただいたほうが回答しやすいと思います。

[hibikikudo]

ありがとうございます。HTMLを追記しました。
また
> check1/icon1のように全て1対1の関係でしょうか。
こちらは全て1対1の関係です。

[yambejp]

パラメータの値を指定するとき全角のクォーテーションはNGです。「“」「”」を半角のダブルクォーテーションに変更してください

[hibikikudo]

修正しました。ご指摘いただきありがとうございます。

Answer 1

#修正
提示されたHTMLに合わせます

CSS修正

span.selected{background-Color:aqua;}

$(function(){
  $('input[type="checkbox"]').change(function(){
    if(r=$(this).prop('id').match(/^check([0-9]+)$/)){
      if($(this).prop('checked')){
        $('#icon'+r[1]).addClass('selected');
      }else{
        $('#icon'+r[1]).removeClass('selected');
      }
    } 
  }).change();
});

※HTML修正

<main>
  <input type="checkbox" value="チェックボックス1" id="check1"/>
  <label for="check1"> チェックボックス1
  </label>
  <input type="checkbox" value="チェックボックス2" id="check2"/>
  <label for="check2">チェックボックス2</label>
  <input type="checkbox" value="チェックボックス3" id="check3"/>
  <label for="check3">チェックボックス3</label>
  ...
</main>
<aside>
  <ul>
    <li><span class="icon" id="icon1">アイコン</span></li>
    <li><span class="icon" id="icon2">アイコン</span></li>
    <li><span class="icon" id="icon3">アイコン</span></li>
    ...
  </ul>
</aside>

Comments

[hibikikudo]

当方の記述ミスにもかかわらず、修正いただきありがとうございました。

Answer 2

CSSで処理する方法とJavaScriptで処理する方法。CSSはチェックボックスの位置をちょっと工夫する必要があるから無理があるが、他に出ていない方法ということで。

<main>
	<input type="checkbox" value="チェックボックス1" id="check1" data-target="#icon1">
	<label for="check1">チェックボックス1</label>
	<input type="checkbox" value="チェックボックス2" id="check2" data-target="#icon2">
	<label for="check2">チェックボックス2</label>
	<input type="checkbox" value="チェックボックス3" id="check3" data-target="#icon3">
	<label for="check3">チェックボックス3</label>
	<aside>
		<ul>
			<li><span class="icon" id="icon1">icon1</span></li>
			<li><span class="icon" id="icon2">icon2</span></li>
			<li><span class="icon" id="icon3">icon3</span></li>
		</ul>
	</aside>
</main>

#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();
} );
```**動くサンプル：**[https://jsfiddle.net/r0yrq6ae/](https://jsfiddle.net/r0yrq6ae/)

Comments

[hibikikudo]

最もシンプルなコードかつ、IDに数字以外が入っていてもOKで応用しやすい。さらにCSSで表現する方法も合わせて回答くださいましたkei344さんの回答をベストアンサーとさせていただきます。
ご回答いただいた皆様ありがとうございました。

Answer 3

※元のhtmlが若干おかしかったので修正しています。
※正規表現の部分はたまたまうまくいってますがよく理解しているわけではないです。

<style> .selected { background-color: red; } </style> <input type="checkbox" value="チェックボックス1" id="check1" /> <label for="check1"> チェックボックス1</label> <input type="checkbox" value="チェックボックス2" id="check2" /> <label for="check2">チェックボックス2</label> <input type="checkbox" value="チェックボックス3" id="check3" /> <label for="check3">チェックボックス3</label>

<ul>
    <li><span class="icon" id="icon1">アイコン１</span></li>
    <li><span class="icon" id="icon2">アイコン2</span></li>
    <li><span class="icon" id="icon3">アイコン3</span></li>
</ul>

<script> $("input[type=checkbox]").on("change", function() { var num = parseInt($(this).attr("id").match(/\d+/g)); if ($(this).prop('checked')) { $("#icon" + num).addClass("selected"); } else { $("#icon" + num).removeClass("selected"); } }); </script>

Answer 4

$("input[type=checkbox]").on("change", function() {
  $("[id^=icon]").removeClass("selected");

  $("input[type=checkbox]:checked").each(function() {
    $("#" + $(this).data("for")).addClass("selected");
  });
});

.selected {
  outline: 2px solid #f00;
}

<label><input type="checkbox" data-for="icon01">c01</label>
<label><input type="checkbox" data-for="icon02">c02</label>
<label><input type="checkbox" data-for="icon03">c03</label>
<label><input type="checkbox" data-for="icon04">c04</label>
<label><input type="checkbox" data-for="icon05">c05</label>
<label><input type="checkbox" data-for="icon06">c06</label>
<label><input type="checkbox" data-for="icon07">c07</label>
<label><input type="checkbox" data-for="icon08">c08</label>
<label><input type="checkbox" data-for="icon09">c09</label>
<label><input type="checkbox" data-for="icon10">c10</label>
<label><input type="checkbox" data-for="icon11">c11</label>
<label><input type="checkbox" data-for="icon12">c12</label>
<label><input type="checkbox" data-for="icon13">c13</label>
<label><input type="checkbox" data-for="icon14">c14</label>
<label><input type="checkbox" data-for="icon15">c15</label>
<label><input type="checkbox" data-for="icon16">c16</label>
<label><input type="checkbox" data-for="icon17">c17</label>
<label><input type="checkbox" data-for="icon18">c18</label>
<label><input type="checkbox" data-for="icon19">c19</label>
<label><input type="checkbox" data-for="icon20">c20</label>

<img alt="icon" id="icon01">
<img alt="icon" id="icon02">
<img alt="icon" id="icon03">
<img alt="icon" id="icon04">
<img alt="icon" id="icon05">
<img alt="icon" id="icon06">
<img alt="icon" id="icon07">
<img alt="icon" id="icon08">
<img alt="icon" id="icon09">
<img alt="icon" id="icon10">
<img alt="icon" id="icon11">
<img alt="icon" id="icon12">
<img alt="icon" id="icon13">
<img alt="icon" id="icon14">
<img alt="icon" id="icon15">
<img alt="icon" id="icon16">
<img alt="icon" id="icon17">
<img alt="icon" id="icon18">
<img alt="icon" id="icon19">
<img alt="icon" id="icon20">

Comments

[hibikikudo]

こちらもシンプルでいいですね。ありがとうございました。