質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

344閲覧

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

nanashinohatsu

総合スコア2

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/06/06 07:52

実現したいこと

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; }

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/06/06 07:59

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

2023/06/06 08:10

なんとなく、Vueっぽいような?
Lhankor_Mhy

2023/06/06 08:28 編集

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

回答1

0

ベストアンサー

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

css

1 /* input[type=radio]:checked~.check { */ 2 input[type=radio]:checked~label .check { 3 border: 5px solid #0DFF92; 4 } 5 6 /* input[type=radio]:checked~.check::before { */ 7 input[type=radio]:checked~label .check::before { 8 background: #0DFF92; 9 } 10

投稿2023/06/06 08:38

Lhankor_Mhy

総合スコア36407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanashinohatsu

2023/06/06 08:45

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

2023/06/06 08:51

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

2023/06/06 09:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問