Q&Aラジオボタンがチェックされたらチェックされていないボタンの中の背景色を赤（#ff0000）から白（#fff）に変えたいのですが、上手くいきません。
javascript、もしくは、jQueryでラベルの色を変えるのだと思うのですが、よく分かりません。
ラジオボタンはdisplay: none;でスタイルをリセットしたうえで変更しています。
りんご ボタン（背景赤）
オレンジ ボタン（背景赤）
↓↓
りんごをチェックすると・・
↓↓
りんご ボタン（背景白、チェックマーク青）
オレンジ ボタン（背景白）
りんご ボタン（背景赤）
オレンジ ボタン（背景赤）
↓↓
オレンジをチェックすると・・
↓↓
りんご ボタン（背景白）
オレンジ ボタン（背景白、チェックマーク青）
動かないjavascript、もしくは、jQuery 以下の場合、ボタンの中ではなく、ボタンの外の背景色が変わってしまう。 <script> function funappletest() { $("#fruit").css("background-color","#FFF"); } function funorangetest() { $("#fruit").css("background-color","#FFF"); } </script>
<HTML> <dl id="fruit"> <dt>りんご</dt> <dd><input id="apple" name= "fruit" type="radio" onclick="funappletest()" value="apple"/> <label for="apple">りんご</label> <input id="orange" name= "fruit" type="radio" onclick="funorangetest()" value="orange" /> <label for="orange">オレンジ</label> </dd> </dl> </HTML>
<style type="text/css"> input[type="radio"] { display: none; } label { position: relative; display: inline-block; padding: 3px 3px 3px 20px; cursor: pointer; } label::before, label::after { position: absolute; content: ''; top: 50%; border-radius: 100%; } label::before { left: 0; width: 10px; height: 10px; margin-top: -8px; background: #ff0000; } label:hover::before { background: #ff0000; } label::after { opacity: 0; left: 4px; width: 6px; height: 6px; margin-top: -4px; background: #00ffff; } input[type="radio"]:checked + label::before { background: #fff; } input[type="radio"]:checked + label::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } </style>
回答3件
0
inari1973 さんのブラウザが不明なのでFirefoxとChromeで試しました。
javascriptはおそらく不要です。cssを変更してください。
css
1input[type="radio"]:checked + label::after { 2 background: #fff; //これを追加 3 opacity: 1; 4 -webkit-transform: scale(1); 5 transform: scale(1); 6} 7//ココから下も追加 8input[type="radio"]:not(:checked) + label::before { 9 background: #ffffff; 10 border: 1px solid #ff0000; 11} 12input[type="radio"]:not(:checked) + label::after { 13 background: #ffffff; 14}
またhtmlも少し変更が必要なようです？
html
1<HTML> 2<dl> 3<dt>りんご</dt> 4<dd><input id="apple" name= "fruit" type="radio" onclick="funappletest()" value="apple" checked style="display:none"/> 5<label for="apple">りんご</label> 6<input id="orange" name= "fruit" type="radio" onclick="funorangetest()" value="orange" style="display:none"/> 7<label for="orange">オレンジ</label> 8</dd> 9</dl> 10</HTML>
jsfiddleで試しましたので下記を見ていただけると幸いです。
https://jsfiddle.net/amanoese/pwLg1nq6/11/
投稿2019/04/17 12:04
編集2019/04/17 12:11
総合スコア132
0
自己解決
CSSの擬似要素のプロパティはセレクタに直接指定できないようでしたので、IDそのものを変更することによって解決できました。
<script> var aElement = document.getElementById('fruits') ; aElement.id = "fruits2" ; </script>
CSSには
「#fruits～」
「#fruits2～（背景が白い）」
の2つを用意する。
投稿2019/04/17 13:28
総合スコア35
0
質問文が追記されたため、再回答いたします。
jsを使わずに実現するのは難しいかもしれません。
html
1<HTML> 2<dl> 3<dt>りんご</dt> 4<dd id="fruits-radios"> 5<input id="apple" name="fruits" type="radio" value="apple" style="display:none"/> 6<label for="apple">りんご</label> 7<input id="orange" name="fruits" type="radio" value="orange" style="display:none"/> 8<label for="orange">オレンジ</label> 9</dd> 10</dl> 11</HTML>
css
1input[type="radio"] + label::after { 2 background: #ff0000; //ココを追加 3 opacity: 1; 4 -webkit-transform: scale(1); 5 transform: scale(1); 6} 7//ココより下を追加 8 9.selected input[type="radio"]:not(:checked) + label::before { 10 background: #ffffff; 11 border: 1px solid #00ffff; 12} 13.selected input[type="radio"]:not(:checked) + label::after { 14 background: #ffffff; 15} 16input[type="radio"] + label::before { 17 background: #ff0000; 18 border: 1px solid #ff0000; 19}
javascript
1$('input').on('click change',function(){ 2 $("#fruits-radios").addClass('selected') 3});
以下がjsfiddleで試せるリンクになります。
https://jsfiddle.net/amanoese/pwLg1nq6/33/
投稿2019/04/17 13:06
編集2019/04/17 13:07総合スコア132
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/17 12:12
2019/04/17 12:34
2019/04/17 12:56
2019/04/17 13:00
2019/04/17 13:32