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

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

ただいまの
回答率

89.99%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,198

dog_ugo

score 12

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"となど、同じ名前が複数あるため?)
・ひらがなを選択した後、あ、を選択し、アルファベット、または数字を
 選択した場合、あが選択されたまま入力不可になる点

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/06/04 12:49

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • kei344

    2016/06/04 13:03

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

    キャンセル

  • kei344

    2016/06/04 13:13

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

    キャンセル

回答 1

checkベストアンサー

+2

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

function changeDisabled( num ) {
    var $t = document.querySelectorAll( 'input[name^="test"]' )    // 複数取得
      ,i , l = $t.length
      ;
    for ( i = 0; i < l; i++ ) {
        $t[ i ].disabled = !( $t[ i ].name === 'test' + num );
    }
}

動くサンプル:https://jsfiddle.net/k1x1726t/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/04 20:20

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

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる