Javascriptでフォームの表示・非表示を切り替えたい

Question

前提・実現したいこと

20分調べてどうにも分からなかったため、初めて質問させていただきます。
諸先輩方、何卒よろしくお願いいたします。

アンケートフォームを作成しており、フォームの選択肢によって表示・非表示を動的に切り替えたいと考えております。

Q1-1.本サービスを利用する1番目の理由に該当するものを選択してください
 ○ 価格　○ 品質　○ サポート体制　○ 知名度　○ ブランド　○ その他

Q1-2.本サービスを利用する2番目の理由に該当するものを選択してください
 ○ 価格　○ 品質　○ サポート体制　○ 知名度　○ ブランド　○ その他

Q1-3.本サービスを利用する3番目の理由に該当するものを選択してください
 ○ 価格　○ 品質　○ サポート体制　○ 知名度　○ ブランド　○ その他

例えばQ1-1.で「知名度」を選択した場合、自動的にQ1-2,Q1-3からは知名度が選択肢から消えるようにしたいです。
要するにQ1-3に回答する際、選択肢が2つ消えた状態になっている必要がございます。

このフォームは作成できたのですが、選択肢によってフォームの表示・非表示の切り替えがどうすれば実現できるのか分かりませんでした。

発生している問題・エラーメッセージ

問題といたしましてはQ.1-1とQ.1-2とQ.1-3が同じ回答を持つということです。
ここに関してどうすれば別フォームの値を選択肢から削除できるのかが分かりませんでした。

該当のソースコード

念のため、下記にソースコードを記述いたします。

<form method="post" id="form" action="confirm.php">
    <h2 class="title">Q1-1.本サービスを利用する1番目の理由に該当するものを選択してください</h2>
    <div class="question_content">
        <input type="radio" name="q1-1" value="価格">
        <input type="radio" name="q1-1" value="品質">
        <input type="radio" name="q1-1" value="サポート体制">
        <input type="radio" name="q1-1" value="知名度">
        <input type="radio" name="q1-1" value="ブランド">
        <input type="radio" name="q1-1" value="その他">
    </div><!-- #Q1-1 -->
    <h2 class="title">Q1-2.本サービスを利用する2番目の理由に該当するものを選択してください</h2>
    <div class="question_content">
        <input type="radio" name="q1-2" value="価格">
        <input type="radio" name="q1-2" value="品質">
        <input type="radio" name="q1-2" value="サポート体制">
        <input type="radio" name="q1-2" value="知名度">
        <input type="radio" name="q1-2" value="ブランド">
        <input type="radio" name="q1-2" value="その他">
    </div><!-- #Q1-2 -->
    <h2 class="title">Q1-3.本サービスを利用する3番目の理由に該当するものを選択してください</h2>
    <div class="question_content">
        <input type="radio" name="q1-3" value="価格">
        <input type="radio" name="q1-3" value="品質">
        <input type="radio" name="q1-3" value="サポート体制">
        <input type="radio" name="q1-3" value="知名度">
        <input type="radio" name="q1-3" value="ブランド">
        <input type="radio" name="q1-3" value="その他">
    </div><!-- #Q1-3 -->
    <h2 class="title">その他を選択された方のみご入力ください</h2>
    <div class="question_content">
        その他理由：<input type="text" name="other" size="20" value="" maxlength="255">
    </div><!-- #other -->
    <h2 class="title">Q2.ご意見・ご感想など</h2>
    <div class="wrap">
        <textarea name="q2" cols="30" rows="20"></textarea>
    </div><!-- #Q2 -->
    <p class="submit_button" align="center">
	    <input type="submit" value="　 確認画面へすすむ 　" />
    </p>
</form>

試したこと

「フォーム　値　表示　非表示」で検索し、いくつかの記事を読みましたが、直接的な解決方法を発見することができませんでした。
発見できた記事は一つのラジオボタンの値によって、要素の表示・非表示を切り替えるのみでした。

補足情報（FW/ツールのバージョンなど）

DreamWeaver CS6を使用しております。

Answer 1

Javascriptでフォームの表示・非表示を切り替えたい

JavaScriptに直接フォームの表示・非表示を切り替える機能はありません。
HTMLファイルをブラウザが読み取って構築したDOMツリーというものがあり、
それに対してJavaScriptが変更を促す事で、DOMツリーを変更して見た目を変化させることだけです。

そして表示・非表示を切り替える為にはこれらの方法があります。

• 【推奨】予めスタイルシートに.hidden { display: none; }等と書いておき、JavaScriptで不要なフォーム部品にhiddenクラスを付与して見た目だけを非表示にする
• 【非推奨】フォーム部品をJavaScriptの変数として所持しておき、選択肢に応じてフォーム部品をDOMツリーに挿し込む
• 【高難易度】Vue.js等のJSフレームワークを利用して、テンプレート上でv-if等を使って制御する

DOMツリーをJavaScriptでゴリゴリ編集するのは、
バリバリのフロントエンドエンジニアでもデバッグで死ぬのでやめたほうが良いです。
あくまでDOMツリー構造では全てを描画する設定にしてしまって、
クラスの付け外しで表示/非表示を切り替えるだけにしておくようにしましょう。

質問文のように、口頭で説明すればシンプルだけど
複雑な仕様になってくるとVue.jsなどのJSフレームワークがあればかなり便利ですね。
検討してみてください。

問題といたしましてはQ.1-1とQ.1-2とQ.1-3が同じ回答を持つということです。

もし我々がプロの仕事としてお受けする場合、
イレギュラーケースの対応等も込みだと仕様が複雑になってしまうので、
ネイティブのJSで全部やれという話なら数日仕事になるので数万のお仕事になります。
頑張って書いてみてください。

jQueryならname="q1-1"のフォーム部品が選択された事をトリガーに関数を実行出来ますので、
その関数内で2番目と3番目の選択肢の内、不要な選択肢を非表示にするという事を記述してみてください。

HTMLのクラスは半角スペースで複数指定する事が可能ですので、
それで2つ目、3つ目の質問という風に別のものだよという風に差別化してあげましょう。
更に「価格」「ブランド」「その他」などの選択肢もJavaScriptでDOMツリーとしてつかみやすくする為にクラス名を割り振って上げると楽だと思います。

Comments

[sc2273]

>miyabi-sun様
とても詳しい内容でのご回答ありがとうございます！！

初めに謝らないといけないのですが、”Javascriptでフォームの表示・非表示を切り替えたい”と書いたのは、
私がJavascriptでないと切り替えられないと思い込んでいたからです。
もし、Javascriptにこだわりがあるように伝わってしまっていたら申し訳ありません・・。

DOMツリー自体初めて知りまして、miyabi-sun様にご教示いただいた通り、これでフォームを制御するのは今の私には無理難題だと感じました。

そのためJavascriptであれば推奨していただいた、display: none;での実装か、jQueryでの実装を試行錯誤しながら考えてみます！

Answer 2

こんな感じです

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.question_content input[type=radio]'),function(x){
    x.addEventListener('change',function(e){
      [].forEach.call(document.querySelectorAll('.question_content label'),function(y){
        y.style.display='';
      });
      [].forEach.call(document.querySelectorAll('.question_content input[type=radio]:checked'),function(y){
        [].forEach.call(document.querySelectorAll('.question_content input[type=radio][value='+y.value+']:not([name='+y.name+'])'),function(y){
          y.closest('label').style.display='none';
        });
      });
    });
  });
});
</script>
<form>
    <h2 class="title">Q1-1.本サービスを利用する1番目の理由に該当するものを選択してください</h2>
    <div class="question_content">
        <label><input type="radio" name="q1-1" value="価格">価格</label>
        <label><input type="radio" name="q1-1" value="品質">品質</label>
        <label><input type="radio" name="q1-1" value="サポート体制">サポート体制</label>
        <label><input type="radio" name="q1-1" value="知名度">知名度</label>
        <label><input type="radio" name="q1-1" value="ブランド">ブランド</label>
        <label><input type="radio" name="q1-1" value="その他">その他</label>
    </div><!-- #Q1-1 -->
    <h2 class="title">Q1-2.本サービスを利用する2番目の理由に該当するものを選択してください</h2>
    <div class="question_content">
        <label><input type="radio" name="q1-2" value="価格">価格</label>
        <label><input type="radio" name="q1-2" value="品質">品質</label>
        <label><input type="radio" name="q1-2" value="サポート体制">サポート体制</label>
        <label><input type="radio" name="q1-2" value="知名度">知名度</label>
        <label><input type="radio" name="q1-2" value="ブランド">ブランド</label>
        <label><input type="radio" name="q1-2" value="その他">その他</label>
    </div><!-- #Q1-2 -->
    <h2 class="title">Q1-3.本サービスを利用する3番目の理由に該当するものを選択してください</h2>
    <div class="question_content">
        <label><input type="radio" name="q1-3" value="価格">価格</label>
        <label><input type="radio" name="q1-3" value="品質">品質</label>
        <label><input type="radio" name="q1-3" value="サポート体制">サポート体制</label>
        <label><input type="radio" name="q1-3" value="知名度">知名度</label>
        <label><input type="radio" name="q1-3" value="ブランド">ブランド</label>
        <label><input type="radio" name="q1-3" value="その他">その他</label>
    </div><!-- #Q1-3 -->
</form>

ただしclosestは未対応のブラウザがあるので、汎用的にするには一工夫必要

Comments

[sc2273]

>yambejp様
ご回答ありがとうございます！
いただいたコードで試してみたところ、探していた通りの挙動が実現できました。
Javascriptだけでは自分の力では全く解決策が見つからなかったのでとても助かりました。
本当にありがとうございます！！！