Apps Scriptでhtmlのページを作成しているが、ラジオボタンをクリックしても選んだところのチェックが入らない現象が起きています。

Question

実現したいこと

Apps Scriptでhtmlのページを作成しているのですが、
ラジオボタンを作成してクリックしてもラジオボタンの選んだところのチェックが入らないです。

今は5m以下のところを選択している状態です。
丸の部分にクリックしているのに入っていないです。

htmlは下記の内容です。

<!-- 選択肢のラジオボタン + ラベル -->
<template v-for="(choise, i) in activeQuestion.choises">
 <ul>
  <li>
    <input
      type="radio"
      :id="`choise${i}`"
      :value="i"
      v-model="userAnswer"
      :disabled="showAnswer"
        @click="onRadioButtonClick"
    >
    <label
    v-if="choise.text"
      :for="`choise${i}`" 
      style="display: block"
    >

    {{ choise.text }}
   <div class="check"></div>
    </li>
</ul>
</template>

下記がラジオボタンのCSSになります。

 /* ラジオボタン */
.container{
  display: block;
  position: relative;
  margin: 5px auto;
  width: 90%;
  padding: 20px;
}
h2 {
  color: #303030;
}
.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
ul li{
  color: #303030;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #333;
}
ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}
ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1em;
  padding: 17px 13px 13px 80px;
  margin: 7px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
  color: #E9F1FE;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #303030;
  border-radius: 100%;
  height: 20px;
  width: 20px;
  top: 15px;
  left: 20px;
  z-index: 5;
  transition: border 0.25s linear;
  -webkit-transition: border 0.25s linear;
}
ul li:hover .check {
  border: 5px solid #0DFF92;
}
ul li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
  left: 5px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}
input[type=radio]:checked ~ label{
  color: #0DFF92;
}

原因・回避策がお分かりの方教えていただきたいです。

Comments

[m.ts10806]

Java は本件とどのように関係するのでしょうか

[Lhankor_Mhy]

なんとなく、Vueっぽいような？

[Lhankor_Mhy]

Vue だとして、それっぽいHTMLで試してみましたが、クリックしてラジオボタンにチェックが入るようでした（見えないけど）

Answer 1

もしかしてこういうことですか？

        /* input[type=radio]:checked~.check { */
        input[type=radio]:checked~label .check {
            border: 5px solid #0DFF92;
        }

        /* input[type=radio]:checked~.check::before { */
        input[type=radio]:checked~label .check::before {
            background: #0DFF92;
        }

Comments

[nanashinohatsu]

コードありがとうございます。
チェックが付きました。あとは位置の調整をしたいと思います。
大変助かりました。

[Lhankor_Mhy]

お役に立てたようで何よりです。
もう少しわかりやすい質問を心がけた方が解答がつきやすいんじゃないかな、と思いましたので、よろしければ次の機会のためにお留め置きいただければ幸いです。（もちろん、強制ではありません）

[nanashinohatsu]

ご指摘ありがとうございます。