ラジオボックスをクリックすると別のラジオボックスが反応してしまう。

上記の記事を参考にアンケートフォームを作っています。

僕たちがするアンケート内容でラジオボックスが複数必要だったのでHTMLを要素を入れて、CSSを適宜追加しました。

エラー内容
① 転出の理由のうち「②進学」をクリックする
② 性別 Sexの「女性 female」が赤く表示されてしまう。

どのボタンを押しても上のラジオボックスが反応してしまいます。

やりたいことは転出の理由で選択されたラベルを黄色に変えたいです。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">

    <?!=include('form.css');?>
    <title>転出者・転入者に関するアンケート</title>
  </head>
  <body>
    <main>
        <div class="container">
            <form id="form" action="" method="POST">
            <h1>転出者・転入者に関するアンケート</h1>
            <h1>Questionnaire about moving out and in</h1>
            <h2>下記の項目にご回答下さい</h2>
                <!-- 支払い日付
                <div class="block">
                    <label for="calendar" class="block-title">支払い年月</label>
                    <input type="date" id="calendar">
                </div> -->
                <div class="block">
                    <label class="block-title">性別 Sex </label>
                    <div class="radio-wrapper">
                        <input type="radio" id="detail1" name="detail" class="radio-inline__input" checked>
                        <label for="detail1" class="radio-inline__label">男性 male </label>
                        <input type="radio" id="detail2" name="detail" class="radio-inline__input">
                        <label for="detail2" class="radio-inline__label">女性 female </label>
                        <input type="radio" id="detail3" name="detail" class="radio-inline__input">
                        <label for="detail3" class="radio-inline__label" >回答しない N/A</label>
                    </div>
                </div>
                
                    <div class="radio-wrapper">
                        <input type="radio" id="detail10" name="detail" class="radio-inline__input2" checked>
                        <label for="detail1" class="radio-inline__label2">①仕事(就職、転職、転勤)</label>
                        <input type="radio" id="detail20" name="detail2" class="radio-inline__input2">
                        <label for="detail2" class="radio-inline__label2">②進学</label>
                        <input type="radio" id="detail30" name="detail" class="radio-inline__input2">
                        <label for="detail3" class="radio-inline__label2">③結婚</label>             
                    </div>
                </div>

                <div class="block">
                    <label for="cost" class="block-title">転出入の理由(自由記述)
                      Other reason for monving </label>
                    <div class="cost-group">
                        <input type="text" name="cost" id="cost"><span></span>
                    </div>
                </div>    

                <!-- 申請内容 -->

                <div class="button-wrapper">
                    <span class="submit">送信(Send)</span>
                </div>
            </form>
        </div>
        <form id="mG61Hd" action="https://docs.google.com/forms/u/0/d/e/AKfycbwLvDFVgMuuWwr1EiAwAd_oDkVSnJFgsOA7dTEUuk08WKClWxr5NQrbYQ" method="POST">
            <input type="hidden" id="calendar_year" name="entry.1029669143_year" value="">
            <input type="hidden" id="calendar_month" name="entry.1029669143_month" value="">
            <input type="hidden" id="calendar_day" name="entry.1029669143_day" value="">
            <input type="hidden" id="detail_val" name="entry.自分のID" value="電気">
            <input type="hidden" id="cost_val" name="entry.自分のID" value="">
        </form>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function(){
            //送信ボタンクリック時hedden項目のformをサブミットする
            $('.submit').on('click', function(e){
              $('#mG61Hd').submit();
            });
            //「支払い年月」項目が変更されたときに対応するhidden項目の値も変更
            $('#calendar').on('change', function(e){
                if($(this).val() != ''){
                    $(this).css('color','#000');
                    let calendar = $(this).val();
                    let dt = calendar.split('-');
                    $('#calendar_year').val(dt[0]);
                    $('#calendar_month').val(dt[1]);
                    $('#calendar_day').val(dt[2]);
                } else {
                    $(this).css('color','#999');
                    $('#calendar_year').val('');
                    $('#calendar_month').val('');
                    $('#calendar_day').val('');
                }
            });
            //「申請内容」項目が変更されたときに対応するhidden項目の値も変更
            $('input[name="detail"]').on('change', function(e){
                $('#detail_val').val($(this).next().text());
            }); 
            $('#cost').on('change', function(e){
                $('#cost_val').val($(this).val());
            }); 
        });
    </script>
  </body>
</html>

<style>
* {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
main {
    width: 100vw;
    margin: auto;
    color: #fff;
}
.container {
	min-height: 120px;
	background-color: #f7f7f7;
  background-image: url("https://www.city.makinohara.shizuoka.jp/uploaded/life/30725_30745_img.jpg");
  max-width: 100%; 
  height:auto;
  background-position:center top;
  background-color: green;
  background-size: cover; 
  background-repeat: no-repeat;
  text-align: center;
}
h1 {
  position: relative;
  display: inline-block;
  padding:50px 55px;
  font-size: 50px;
}
h1:before, h1:after {
  content: '';
  position: absolute;
  top: 45%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
h1:before {
  left:0;
}
h1:after {
  right: 0;
}
.block {
    height: 200px;
    margin: 50px 100px 50px 100px;
    display: flex;
    background: rgb(30,30,30,0.7);
    width: 80%;
    flex-direction: column;
    text-align: left;
}
.block {
    height: 200px;
    margin: 50px 100px 50px 100px;
    display: flex;
    background: rgb(30,30,30,0.7);
    width: 80%;
    flex-direction: column;
    text-align: left;
}
.block-title {
    font-size: 26px;
    font-weight: bolder;
    margin: 20px;
    border-bottom: 1px solid #eee;
}
.block label {
    height: 30px;
}
.detail_checks input {
    margin: 10px;
}
input {
    font-size: 20px;;
    margin: 25px 20px 20px 20px;
    margin-top: 

}
.cost-group{
    display:flex;
    align-items: flex-end;
}
.cost-group span{
    font-size: 20px;
    margin: 25px 20px 20px 0;
    font-weight: bolder;
}
input[type="number"] {
    height:30px;
    width: 150px;
}
input[type="date"] {
    height: 40px;
    width: 200px;
    border-radius: 10px;
    color: #999;
}
.radio-wrapper {
    display:flex;
}
.radio-inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
// 追加 --------------------------------------------------------------
.radio-inline__input2 {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
// 追加 ここまで --------------------------------------------------------------

.radio-inline__label {
    display: inline-block;
    padding: 10px 50px;
    margin: 10px;
    border-radius: 3px;
    transition: all .2s;
    background: blue;
    color: #444;
    font-weight: bolder;
    cursor:pointer;  
    font-size: 20px;
}
.radio-inline__input:checked + .radio-inline__label {
    background: red;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}

//　追加 ここから -----------------------------------------------------------------------
.radio-inline__label2 {
    display: inline-block;
    padding: 10px 50px;
    margin: 20px 10px 10px 10px;
    border-radius: 3px;
    transition: all .2s;
    background: black;
    color: #444;
    font-weight: bolder;
    cursor:pointer;  
    font-size: 20px;
}

.radio-inline__input2:checked + .radio-inline__label2 {
    background: yellow;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}
// 追加 ここまで -----------------------------------------------------------------------


.submit {
  width: 100%;  
  background:#673ab7;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:#fff;
  font-size:24px;
  padding:10px 100px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
  box-sizing:border-box;
  
}
.submit:hover {
    color: #fff;
    background: #884EF4;
}
.button-wrapper {
    width: 80%;
    text-align: left;    
    margin: 0px auto;
    display: block;
    text-align: center;  
    padding-bottom: 30px;
}
.error-message {
    color: #ed4055;
    padding: 5px;
    font-size: 20px;
}
.cost-error,.date-error {
    display:none;
}
label.block-title {
  white-space: pre-line;
}
</style>

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

回答3件

自己解決

適当にforをいじっていたら解決しました。。
なぜこうなかった整理して皆様にお伝えするレベルまでまとまれば記述しようと思います。

投稿2021/01/25 07:53

momokoko

総合スコア38

ここで指定している名前のせいですね。
このコードで反応するHTMLは性別 Sex以外にもありますよね。
それに注意すれば解決できるかと思います。

js
1  //「申請内容」項目が変更されたときに対応するhidden項目の値も変更
2  $('input[name="detail"]').on('change', function(e){
3    $('#detail_val').val($(this).next().text());
4  });