CSSでラジオボタンの選択によりボタン背景色を変更したい

Question

ラジオボタンの選択によりボタン背景色を変更したい

HTML、CSS、jQueryを使用して全5問のアンケートページを作成しています。

各問に対しYES/NOで答えてもらう形式になっており、
YESの場合はボタン背景ピンク、
NOの場合はボタン背景グレーに変更をしたいと考えております。

よろしくお願いいたします。

【追記】
こちらの内容をHTML、CSSのみで実装を行いたく、
その方法をご教授いただけますと幸いです。

発生している問題・エラーメッセージ

エラーメッセージなどは特に表示されていません。
ボタン自体は押されているものの、addClassで追加されるはずのクラスが追加されず背景色が変更されません。

該当のソースコード

.section_btn label {
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0.2em;
    padding: 17px 50px 17px 60px;
    margin-right: 60px;
    background-color: #c2c2c2;
}
.section_btn input[type="radio"] {
    display: none;
}
.section_btn .q1_answer_yes.active {
    background-color: #f2aabd;
}
.section_btn .q1_answer_no.active {
    background-color: #5c5c5c;
}

<div class="section_btn">
    <label class="q1_answer_yes"><input id="q1_yes" class="" type="radio" name="" value="">YES</label>
    <label class="q1_answer_no"><input id="q1_no" class="" type="radio" name="" value="">NO</label>
</div>
```※一部削除しています。

```jQuery
<script type='text/javascript'>
$(function(){
    $('#q1_yes').click(function() {
        $('.q1_answer_yes').addClass('active');
        $(".q1_answer_no").removeClass('active');
    });
});
$(function(){
    $('#q1_no').click(function() {
        $('.q1_answer_no').addClass('active');
        $(".q1_answer_yes").removeClass('active');
    });
});
</script>

試したこと

下記内容も試しましたができませんでした。

$('.q1_answer_yes').addClass('active');
　　↓
$(this).parent().addClass('active');

補足情報（FW/ツールのバージョンなど）

WPのような知識がなくてもページを作成できるツールを使用して作成しており、
元々labelのクラスにinput押下前は『inputError』が、押下後は『inputOK』が付与されております。
こちらのjQueryが原因ではないかとも考えているのですが、
その記述がされているjQueryはこちらから見ることも修正することもできません。

Comments

[int32_t]

Google Chrome では期待どおり動いているようですけど、何のブラウザで確認していますか?

[smmek]

Google Chromeにて確認しております。

補足情報に記載した通り、
元々入っているjQueryが原因でしょうか？

[int32_t]

それは質問文に書かれた情報からは判断不能です。

[smmek]

失礼いたしました。

ご回答いただきありがとうございます。

Answer 1

以下の方法で解決しました。

<div class="q1_section_btn">
    <label>
        <input class="" type="radio" name="" value="">
        <span class="answer_yes">YES</span>
    </label>
    <label>
        <input class="" type="radio" name="" value="">
        <span class="answer_no">NO</span>
    </label>
</div>

.q1_section_btn {
    width: 100%;
    margin: 40px auto 0;
    text-align: center;
}
input[type="radio"] {
    opacity: 0;
    appearance: none;
    position: absolute;
}
input[type="radio"] + span {
    display: inline-block;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0.2em;
    padding: 17px 57px;
    margin-right: 60px;
    background-color: #c2c2c2;
}
input[type="radio"] + span.answer_no {
    margin: 0;
    padding: 17px 63px;
}
input[type="radio"]:checked + .answer_yes {
    background-color: #f2aabd;
}
input[type="radio"]:checked + .answer_no {
    background-color: #5c5c5c;
}

参考サイト
https://www.webcreatorbox.com/tech/css-svg-checkbox

Answer 2

提示のコードで問題なく動いていますので、

WPのような知識がなくてもページを作成できるツールを使用して作成しており、

ということなので、そのツールとの相性なんでしょう。

そもそも、ラジオボタンの name属性を設定してませんが、name属性を設定してグループ化して使用するものです。name属性を設定すれば、js なしでグループ内で１つしか選択できないようになります。

こうすれば、js を使わずにCSSだけで同じことができます。そうすれば、ツールのjsとの相性問題も気にする必要はないと思われます。

<div class="section_btn">
  <input id="q1_yes" type="radio" name="q1" value="">
  <label for="q1_yes" class="q1_answer_yes">YES</label>
  <input id="q1_no" type="radio" name="q1" value="">
  <label for="q1_no" class="q1_answer_no">NO</label>
</div>

.section_btn label {
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0.2em;
    padding: 17px 50px 17px 60px;
    margin-right: 60px;
    background-color: #c2c2c2;
}
.section_btn input[type="radio"] {
    display: none;
}
.section_btn #q1_yes:checked + .q1_answer_yes {
    background-color: #f2aabd;
}
.section_btn #q1_no:checked + .q1_answer_no {
    background-color: #5c5c5c;
}

Comments

[smmek]

ご回答いただきありがとうございます。

name属性は本来、アンケート結果を集計するために補足情報に記載しているツールにて自動付与されており、
今回質問するにあたり削除させていただいております。

混乱を招いていてしまい、失礼いたしました。

なお、先に記載した通り集計にname属性を使用しているため、
そちらを修正することは難しいと考えております。

[hatena19]

name属性がついているなら、ついているコードを提示しないと、回答者は提示されたコードを前提に回答します。（時間を無駄にしました。）
そのツールはHTMLも自動生成されるのですか。HTMLの修正はできないのでしょうか。
そのツールは何なのかは提示できませんか。

[smmek]

私も初めてのツールでセキュリティのために自動生成された属性値については削除して記載させていただきました。
そのため「※一部削除しています。」の記載をしております。

自動生成された部分のHTML修正につきましては、
追加は行えますが、場所を移動したり
（<label>と<input>を逆にするなど）
はできないとのことです。

ツールはMOTENASUというものを使用しております。

[hatena19]

商用の有料ツールですね。
こちらで動作確認することもできないので、これ以上の回答は無理です。
このような場所で質問することではないですね。提供元へ問い合わせしてください。

[smmek]

提供元でも解決できないとのことなのでここで質問させていただきました。

回答ありがとうございまいた。