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

ラジオボタンについて。
３つのラジオボタンがあり選択された時に背景色をつけたいのです。
以前、質問をして２つならできるようにはなったのですが
今度は３択にしないといけなくなりました。
liと増やして、ボタン自体は３つに増えて選択はできるのですが背景が最初のふたつにしか付きません。
scriptの中を変えないといけないのかと思っているのですが、変え方がわかりません。。。
わかる方、ご教授いただければ幸いです。

html
1<!-- HTML -->
2<head>
3  <script>
4   val='';
5  $(function () {
6    changeBtn(val);
7    $('.radio_btn').click(function(){
8      val = $(this).val();
9      changeBtn(val);
10    });
11  });
12  
13  function changeBtn(val){
14    if (val == 1){
15      $('.contract label').removeClass('check');
16      $('#continuation').addClass('check');
17      }else{
18      $('.contract label').removeClass('check');
19      $('#change').addClass('check');
20      }
21  }
22  </script>
23
24<style type="text/css">
25/*CSS*/
26.label{
27  margin: 15px;
28  border:1px solid #ccc;
29  border-radius: 20px;
30  padding: 15px;
31  float: left;
32  cursor: pointer;
33}
34 
35/*↓ラジオボタンが選択された時に適用されるCSS*/
36.check{
37  background:#0B2BD7;
38  color: #fff;
39}
40</style>
41</head>
42<body>
43  <div class="contract">
44   <ul>
45    <li>
46     <label id="continuation" class="check label">
47      <input checked class="radio_btn" type="radio" name="plan" value="1">
48      <span>選択１</span>
49     </label>
50    </li>
51    <li>
52     <label id="change" class="check label">
53      <input checked class="radio_btn" type="radio" name="plan" value="2">
54      <span>選択２</span>
55     </label>
56    </li>
57    <li>
58     <label id="change" class="check label">
59      <input checked class="radio_btn" type="radio" name="plan" value="2">
60      <span>選択３</span>
61     </label>
62    </li>
63   </ul>
64  </div>
65</body>
66

行動規範の内容に同意します

回答2件

ベストアンサー

本題に入る前に言っておきますが、2番目と3番目のlabelに同じidが付いてしまっています。HTMLでは複数のタグに同じidを付けてはいけません。
2番目と3番目のラジオボタンに同じvalueが設定されているのも、選択肢を識別するという意味で良くありません。

また、ラジオボタンは複数ある内の1つしか選択できないので、全てのラジオボタンにchecked属性がついているのはおかしいです。

質問文のコードですと、

一旦すべてのラジオボタンの"check"クラスを外す
↓
クリックしたラジオボタンが
├─ value="1"ならば、id="continuation"のラベルに"check"クラスを付ける
└─ そうでないならば、id="change"のラベルに"check"クラスを付ける
という意味になります。当然、2番目のラベルをコピー&ペーストしただけでは上手く動きません。

正しく動くようにするには、各ラジオボタンのvalueに異なる値を設定した上で(もちろん各ラベルのidも異なる値を設定します)、

クリックしたラジオボタンが
├─ value="1"ならば、id="A"のラベルに"check"クラスを付ける
├─ value="2"ならば、id="B"のラベルに"check"クラスを付ける
├─ value="3"ならば、id="C"のラベルに"check"クラスを付ける
…
という風にします。

ですが、これでは後からラジオボタンの数を増やしたり、valueやidを変更したりしたとき、コードも書き直す必要があり、少々面倒です。

そこで、

(いずれかのラジオボタンが押されたら)
各ラジオボタンについて、
├─ checked属性が付いているならば、対応するラベルに"check"クラスを付ける
└─ そうでないならば、対応するラベルから"check"クラスを外す
とすると良いでしょう。
「対応するラベル」は各ラジオボタンの親にあたるので、ラベルにidを付けなくても取得することができます。

コードの修正例は以下の通りです。
https://codepen.io/luuguas/pen/QWOwjOE

html
1<!-- HTML -->
2
3<head>
4  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
5  <script>
6    $(function () {
7      changeBtn();
8      $('.radio_btn').click(function () {
9        console.log("「" + $(this).next().text() + "」が選択されました"); //確認用
10        changeBtn();
11      });
12    });
13
14    function changeBtn() {
15      $('.radio_btn').each(function () { //各ラジオボタンについて
16        if ($(this).prop('checked')) {
17          //checked属性が付いているならラベルに"check"クラスを付ける
18          $(this).parent().addClass('check');
19        }
20        else {
21          //そうでないならラベルから"check"クラスを外す
22          $(this).parent().removeClass('check');
23        }
24      });
25    }
26  </script>
27
28  <style type="text/css">
29    /*CSS*/
30    .label {
31      margin: 15px;
32      border: 1px solid #ccc;
33      border-radius: 20px;
34      padding: 15px;
35      float: left;
36      cursor: pointer;
37    }
38
39    /*↓ラジオボタンが選択された時に適用されるCSS*/
40    .check {
41      background: #0B2BD7;
42      color: #fff;
43    }
44  </style>
45</head>
46
47<body>
48  <div class="contract">
49    <label class="label">
50      <input class="radio_btn" type="radio" name="plan" value="1">
51      <span>選択１</span>
52    </label>
53    <label class="label">
54      <input class="radio_btn" type="radio" name="plan" value="2">
55      <span>選択２</span>
56    </label>
57    <label class="label">
58      <input class="radio_btn" type="radio" name="plan" value="3">
59      <span>選択３</span>
60    </label>
61  </div>
62</body>

投稿2022/01/26 17:42

編集2022/01/26 17:51

luuguas

総合スコア506

yuko_momi

2022/01/26 18:03

とても、わかりやすくご回答いただいてありがとうございます！やりたかったことが全てにおいて完璧にできました！！！本当にありがとうございます！！！めちゃくちゃすごいです。

luuguas

2022/01/26 18:06

お役に立てたようで何よりです。

行動規範の内容に同意します

こういうことでしょうか。修正箇所のみ示します。

HTML/CSS/JavaScript
1  ...
2  function changeBtn(val){
3    $('.contract label').removeClass('check');               // 1:labelのcheckクラスをまとめて外す
4    if (val == 1) $('#continuation').addClass('check');      // 2:選択されているもののみcheckクラスを追加
5    if (val == 2) $('#change').addClass('check');
6    if (val == 3) $('#label3').addClass('check');            // 下記HTMLの修正が前提
7  }
8  ...
9	<body>
10	  <div class="contract">
11	   <ul>
12	    <li>
13	     <label id="continuation" class="check label">
14	      <input class="radio_btn" type="radio" name="plan" value="1">    // 3:checked属性はいらない
15	      <span>選択１</span>
16	     </label>
17	    </li>
18	    <li>
19	     <label id="change" class="check label">
20	      <input class="radio_btn" type="radio" name="plan" value="2">    // 3:〃
21	      <span>選択２</span>
22	     </label>
23	    </li>
24	    <li>
25	     <label id="label3" class="check label">                   // 4:idを修正
26	      <input class="radio_btn" type="radio" name="plan" value="3">    // 5:valueを修正
27	      <span>選択３</span>
28	     </label>
29	    </li>
30	   </ul>
31	  </div>
32	</body>