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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2787閲覧

2重のラジオボタンを作成したい。

dog_ugo

総合スコア14

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/06/04 03:48

編集2016/06/04 04:26

Webページにてラジオボタンを使用したアンケートが取りたいです。
内容は伏せさせていただきますが、例として...

ひらがな、アルファベット、数字、の3つの選択肢から選ばせるラジオボタンがあるとします。
ひらがなを選択した方には、あ、い、う、の選択肢から。
アルファベットを選択した方には、A、B、C、の選択肢の中から。
数字を選択した方には1,2,3,の選択肢の中から
再度選ばせるラジオボタンを作成したいです。

○ひらがな ○あ○い○う
○アルファベット ○A○B○C
○数字 ○1○2○3

このような感じです。
どのようにHTMLとスクリプトを書けばいいでしょうか?

よろしくお願いします。

ご指摘ありがとうございます。
現在までで考えられたコードを記載いたします。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ラジオボタンテスト</title> <script type="text/javascript"> function changeDisabled(num){ for(var i=1; i<=3; i++){ document.form["test"+i].disabled = true; //すべて選択不可に } document.form["test"+num].disabled = false; //条件に合致したものを選択可に } window.onload = function(){ changeDisabled(1); }; </script> </head> <body> <form name="form"> <input type="radio" name="choice" checked onclick ="changeDisabled(1)" >ひらがな <input type="radio" name="test1">あ<br> <input type="radio" name="choice" onclick="changeDisabled(2)">アルファベット <input type="radio" name="test2">A <input type="radio" name="test2">B<br> <input type="radio" name="choice" onclick="changeDisabled(3)">数字 <input type="radio" name="test3">1 <input type="radio" name="test3">2 <input type="radio" name="test3">3 </form> </body> </html>

以上です。
ここで発生している問題点として
・第2選択肢が1択の場合であれば所望の動きをするが
選択肢が複数になった場合、動作しなくなる点
(私が思うに、"test2"となど、同じ名前が複数あるため?)
・ひらがなを選択した後、あ、を選択し、アルファベット、または数字を
選択した場合、あが選択されたまま入力不可になる点

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

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

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

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

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

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

kei344

2016/06/04 04:03

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
kei344

2016/06/04 04:13

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

document.form["test"+i] が最初に出てくる要素しか拾わないので、そのような挙動になっているのでしょう。下記のようにすれば希望の動作に近づくと思います。

JavaScript

1function changeDisabled( num ) { 2 var $t = document.querySelectorAll( 'input[name^="test"]' ) // 複数取得 3 ,i , l = $t.length 4 ; 5 for ( i = 0; i < l; i++ ) { 6 $t[ i ].disabled = !( $t[ i ].name === 'test' + num ); 7 } 8} 9```**動くサンプル:**[https://jsfiddle.net/k1x1726t/](https://jsfiddle.net/k1x1726t/)

投稿2016/06/04 04:51

kei344

総合スコア69357

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

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

dog_ugo

2016/06/04 11:20

ありがとうございました。 無事、希望通りの動きをさせることができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問