ラジオボタンについて。
3つのラジオボタンがあり選択された時に背景色をつけたいのです。
以前、質問をして2つならできるようにはなったのですが
今度は3択にしないといけなくなりました。
liと増やして、ボタン自体は3つに増えて選択はできるのですが背景が最初のふたつにしか付きません。
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>選択1</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>選択2</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>選択3</span> 61 </label> 62 </li> 63 </ul> 64 </div> 65</body> 66
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/26 18:03
2022/01/26 18:06