二つのラジオボタンがあり選択された時に背景色をつけたいです。

切羽詰まって、初めて質問させていただくのでわかりづらいかもしれません。

ラジオボタンについて。
二つのラジオボタンがあり選択された時に背景色をつけたいのです。

以下の書き方だと、どちらも同じ色になってしまいました。

html
<!-- HTML -->
<head>
  <script>
   val='';
  $(function () {
    changeBtn(val);
    $('.radio_btn').click(function(){
      val = $(this).val();
      changeBtn(val);
    });
  });
  
  function changeBtn(val){
    if (val == 1){
      $('.contract label').removeClass('check');
      $('#continuation').addClass('check');
      }else{
      $('.contract label').removeClass('check');
      $('#change').addClass('check');
      }
  }
  </script>

<style type="text/css">
/*CSS*/
.label{
  margin: 15px;
  border:1px solid #ccc;
  border-radius: 20px;
  padding: 15px;
  float: left;
  cursor: pointer;
}
 
/*↓ラジオボタンが選択された時に適用されるCSS*/
.check{
  background:#0B2BD7;
  color: #fff;
}
</style>
</head>
<body>
  <div class="contract">
   <ul>
    <li>
     <label id="continuation" class="check label">
      <input checked class="radio_btn" type="radio" name="plan" value="1">
      <span>契約を継続する</span>
     </label>
    </li>
    <li>
     <label id="change" class="check label">
      <input checked class="radio_btn" type="radio" name="plan" value="2">
      <span>プラン変更する</span>
     </label>
    </li>
   </ul>
  </div>
</body>

わかる方いらっしゃるでしょうか？
よろしくお願いします。

yuko_momi

2022/01/26 14:00 編集

上記の問題は解決していたのですが、新たにラジオボタンを３つに増やさなければならなくなりました。ボタン自体は増やせたのですが、ラジオボタン自体は選択できますが、背景が最初の二つにしかつきません。ボタンを３つに増やす場合、scriptの中を書き直すべきだと思うのですが、どのように書きな直せばいいんでしょうか？

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう！