ラジオボタン選択時に背景色を変える方法（非選択時には色がつかない）【jQuery】

SPONSORED LINK

先日、入力フォームのデザインデータを渡されコーディングに励んでいました。

その時、疑問に思ったのが…

ぼく

選択したラジオボタンだけの背景色を変える…ってどうすればいいん？？

↓渡されたデータはこんな感じです。

↓下記の様に記述してみたものの…

<!-- HTML -->
<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>

/*CSS*/
.label{
  margin: 15px;
  border:1px solid #ccc;
  border-radius: 3px;
  padding: 15px;
  float: left;
  cursor: pointer;
}

<body>

<ul>

<li>

<span>契約を継続する</span>

</label>

</li>

<li>

<span>プラン変更する</span>

</label>

</li>

</ul>

</div>

</body>

/*CSS*/

.label{

margin: 15px;

border:1px solid #ccc;

border-radius: 3px;

padding: 15px;

float: left;

cursor: pointer;

}

当然、背景色はつきません。

ぼく

えっ!？これマジでどうすればいいん？？

ラジオボタンなので、当然「aタグ」では囲っていません。

なので、どういった「擬似クラス（:hover、:activeなど）」を付与すればいいのか見当がつきませんでした。

しばらく考えてはみたものの….時間だけが無情に過ぎていく状況。なので先輩に聞くことに。

ぼく

すんません。コレってどうしたらいいんですか？

先輩

んっ…あ〜ちょっと面倒くさいかも…

ぼく

CSSで何とかなります…？

先輩

何とかなるかもしれんけど…jQueryでやった方がええかな。今、手が離せないから開発の人と相談しながらやって。

ということで、開発（エンジニア）の力を借りることに。

そしたら、15分位で反映してくれました笑（マジ凄ぇ…）

ただ、十分に理解しないまま終わるのはスッキリしない…ということで後日やり方を教えてもらうことに。

ぼく

あれ、どうやったんすか？？

エンジニア

えーと…まず両方のラジオボタンに同じクラス名を付与させて背景色をつける。ただ、そうすると両方の背景色が「青色」になるから、valueの値で条件分岐させて切り分けをした。って感じかな。

ぼく

な、なるほど…

↓コードの記述はこんな感じ。

<!-- HTML -->
<head>
  <script>
   val='';
  $(function () {
    changeBtn(val);
    $('.radio_btn').click(function(){   <!--  ラジオボタンがクリックされた時  -->
      val = $(this).val();   <!--  valueの値が取得される。  -->
      changeBtn(val);
    });
  });
  
  function changeBtn(val){
    if (val == 1){
      $('.contract label').removeClass('check');  <!--  checkのクラス名を削除する。 -->
      $('#continuation').addClass('check');   <!--  valueの値が1の時、checkのクラス名が付与される。 -->
      }else{
      $('.contract label').removeClass('check');  <!--  checkのクラス名を削除する。 -->
      $('#change').addClass('check');  <!--  valueの値が2の時、checkのクラス名が付与される。 -->
      }
  }
  </script>
</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>

/*CSS*/
.label{
  margin: 15px;
  border:1px solid #ccc;
  border-radius: 3px;
  padding: 15px;
  float: left;
  cursor: pointer;
}

/*↓ラジオボタンが選択された時に適用されるCSS*/
.check{
  background:#0B2BD7;
  color: #fff;
}