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

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

ただいまの
回答率

90.54%

  • PHP

    23523questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19852questions

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

  • HTML

    11108questions

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

  • jQuery

    7971questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2496questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

応募フォームの項目でラジオボタンの制御をjacascriptで行いたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 516

yuta1029129

score 28

作成したい動作

1.ラジオボタンで設問1の3つの選択肢(A,B,C)から1つを選択
2.設問1でAを選んだ場合は設問2(D,E)が表示され、Bを選んだ場合は設問3(F,G)、Cを選んだ場合は設問4(H,I)が表示される。
3.設問2~4は問題の内容は違うがnameは一緒で2~4の中で選んだ一つの選択肢を取得したい。設問1はnameも格納場所も違う。
4.設問1でAを選択後、設問2でEを選択。その後に設問1でBを選択した場合は設問2で入力したデータをクリアしたい。

この動作を行いたいのですが、上手く動作しない部分が設問2~4が同じnameなので、設問4の答えしか取得してくれません。恐らく設問2や3で入力した答えを4で上書きしていると思うのですが、この部分をどうにかするjsを書きたいと考えています。
同じ名前の場合はチェックされている値のみを取得するようには出来ないのでしょうか?
また、設問1で選択するごとに1回1回設問2~4の値をクリアしたいのですが、これもどう書いたらいいか悩んでいます。
まだ何も完成していないのですが、作りかけのコードをのせますので、コードのご教授を頂けたらありがたいです。
question_1が設問1のname
question_2が設問2~4のname
select2から4がidで表示の切り替えを行うようにしています。

質問やコードの不備があると思いますが、本当に申し訳ありませんがご教授下さい。よろしくお願いします。

$(function(){
    $("input[name='data[Entry][question_1]']:radio").change(function() {
        displayVals();
    });
    $(window).load(function () { displayVals();});
    $("[name=data[Entry][question_2]]:checked").val()
    function displayVals() {
        var checkNum = $("input[name='data[Entry][question_1]']:checked").val();

        if (checkNum == 1) {
            $("#select2").show();
            $("#select3").hide();
            $("#select4").hide();
        } else if (checkNum == 2) {
            $("#select2").hide();
            $("#select3").show();
            $("#select4").hide();
        } else if (checkNum == 3) {
            $("#select2").hide();
            $("#select3").hide();
            $("#select4").show();
        }
        else {
            $("#select2").hide();
            $("#select3").hide();
            $("#select4").hide();
        }
    }
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

show/hideするたびに各セレクションに対してfindでinput要素をつかんで
prop('disabled',true)してあげればnameの競合はさけられるでしょう

sample

念のためsample

<script>
$(function(){
  $('input[name=q1]').on('change',function(){
    var v=$(this).filter(':checked').val();
    $('#select2').toggle(v==1).find('input').prop('disabled',v!=1);
    $('#select3').toggle(v==2).find('input').prop('disabled',v!=2);
    $('#select4').toggle(v==3).find('input').prop('disabled',v!=3);
  }).change();
});
</script>
<form>
<input type="radio" name="q1" value="1">1
<input type="radio" name="q1" value="2">2
<input type="radio" name="q1" value="3">3
<br>
<div id="select2">
<input type="text" name="q2a" value="1"><br>
<input type="text" name="q2b" value="2"><br>
</div>
<div id="select3">
<input type="text" name="q2a" value="3"><br>
<input type="text" name="q2b" value="4"><br>
</div>
<div id="select4">
<input type="text" name="q2a" value="5"><br>
<input type="text" name="q2b" value="6"><br>
</div>
<input type="submit" value="go">
</form>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/02 18:26

    すいません、回答が遅くなりました。
    サンプルコードを参考にして希望の動作を行えるようになりました。
    助かりました、ありがとうございます

    キャンセル

同じタグがついた質問を見る

  • PHP

    23523questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19852questions

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

  • HTML

    11108questions

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

  • jQuery

    7971questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2496questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。