どうも7noteです。jQueryで同じ属性値同士を連動させる方法について。

全く同じチェックボックスが複数個所にある場面（通常時＆モーダル等）に出くわしたとき、通常画面ではチェックを入れているのにモーダルの画面にあるチェックボックスが反映されないので困ってしまいます。

今回は離れた場所でも同じ属性値を持つチェックボックス同士を連動させる方法について書いていきます。

この記事はjQueryを使用しています。（jQueryって何？という方はこちら）

ソース

index.html

//通常通り見えている用
<div class="normal">
  <label><input type="checkbox" value="りんご">りんご</label>
  <label><input type="checkbox" value="ばなな">ばなな</label>
  <label><input type="checkbox" value="みかん">みかん</label>
</div>

// モーダルで出てくる用
<div class="mordal">
  <label><input type="checkbox" value="りんご">りんご</label>
  <label><input type="checkbox" value="ばなな">ばなな</label>
  <label><input type="checkbox" value="みかん">みかん</label>
</div>

script.js

$(function(){
  $("input[type='checkbox']").on('change', function(){                 //チェックボックス（type='checkbox'）の値が変更されたとき・・・
    cbv = $(this).val();                                               //クリックされたチェックボックスのvalue値を変数に格納
    if( $(this).prop('checked')){                                      //もしクリックされたチェックボックスがチェックされていたら・・・
      $("input:checkbox").prop('checked',true);   //同じvalueを持つチェックボックスは全部チェックを入れる
    }else{
      $("input:checkbox").prop('checked',false);  //逆にチェックが外れていたら全部チェックを外す。
    }
  });
});

書いてみると大したことはなく、スクリプトだけなら10行以内で書けるほど簡単に書けます。
それぞれのスクリプトが行なっている処理はコメントで書いている通りですが、「チェックボックスにチェックが入ったタイミングで起動し、チェックボックスの状態を確認。その後、それに合わせて同じ値を持つ物に対して全部チェックを入れるか、外すか」という処理をしています。