【JavaScript】ラジオボタンの選択によってフォームの表示・非表示やPOSTするデータを切り替える方法

2019/12/13

JavaScriptでリストの表示内容を切り替える

JavaScriptを使うとWebサイトの表示内容をカンタンに切り替えることができます。

完成イメージ

ラジオボタンを選択するとリストに表示される内容が変わるものを作ってみましょう。
下のサンプルは、自動車メーカーを選ぶと車種のリストが変わります。

 トヨタ

 日産

RAV4
シエンタ
アクア
ノート
リーフ
スカイライン

ソースコード

この機能を実現するためのソースは以下のとおり。

HTML

<form>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="toyota" onclick="formSwitch()" checked>
        <label class="form-check-label"> トヨタ</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="nissan" onclick="formSwitch()">
        <label class="form-check-label"> 日産</label>
    </div>
</form>

<ul>
    <div id="toyotaList">
        <li>RAV4</li>
        <li>シエンタ</li>
        <li>アクア</li>
    </div>
    <div id="nissanList">
        <li>ノート</li>
        <li>リーフ</li>
        <li>スカイライン</li>
    </div>
</ul>

<script>
    function formSwitch() {
        hoge = document.getElementsByName('maker')
        if (hoge[0].checked) {
            // トヨタが選択されたら下記を実行
            document.getElementById('toyotaList').style.display = "";
            document.getElementById('nissanList').style.display = "none";
        } else if (hoge[1].checked) {
            // 日産が選択されたら下記を実行
            document.getElementById('toyotaList').style.display = "none";
            document.getElementById('nissanList').style.display = "";
        } else {
            document.getElementById('toyotaList').style.display = "none";
            document.getElementById('nissanList').style.display = "none";
        }
    }
    window.addEventListener('load', formSwitch());
</script>

簡単に解説すると、まず <form></form> でラジオボタンを表示しています。
デフォルトでは checked によってトヨタが選択されていますが、ラジオボタンが選択されると onclick="formSwitch()" によってJavaScriptの関数が呼び出されます。

次に <ul></ul> では車種名のリストを定義しています。
トヨタが選択されたときに表示したいものは <div id="toyotaList"> 、 日産が選択されたときに表示したいものは <div id="nissanList"> というIDを与えています。

<script></script> ではJavaScriptのコードが記述されています。
getElementsByName() メソッドで maker という名前が与えられた要素のコレクションに対して変数 hoge を定義しています。

hoge の１つめ（すなわちトヨタ）が選択されれば toyotaList というIDを持つ要素を表示すると同時に nissanList というIDを持つ要素は非表示となります。hoge の２つめ（すなわち日産）が選択されればその逆の処理。
それ以外の要素は選択できないのですが、一応 else ですべて非表示という選択肢も定義しています。

最後に window.addEventListener('load', formSwitch()); を記述することで、Webページが読み込まれてすぐに formSwitch() が実行されるようにしています。

JavaScriptでフォームの表示内容を切り替える

上記と同様の要領で、リストではなく入力フォームやチェックボックスなどの表示内容を切り替えることも可能です。

完成イメージ

自動車メーカーの名前をラジオボタンを選択すると、チェックボックスやセレクトボックスの内容が変わります。

 トヨタ

 日産

 RAV4

 シエンタ

 アクア

 ノート

 リーフ

 スカイライン

ソースコード

この機能を実現するためのソースは以下のとおり。

HTML

<form>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="toyota" onclick="formSwitch()" checked>
        <label class="form-check-label"> トヨタ</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="nissan" onclick="formSwitch()">
        <label class="form-check-label"> 日産</label>
    </div>

    <div id="toyotaList">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="RAV4" id="RAV4" name="car[]">
            <label class="form-check-label" for="RAV4"> RAV4</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Sienta" id="Sienta" name="car[]">
            <label class="form-check-label" for="Sienta"> シエンタ</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Aquq" id="Aquq" name="car[]">
            <label class="form-check-label" for="Aquq"> アクア</label>
        </div>
    </div>
    <div id="nissanList">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Note" id="Note" name="car[]">
            <label class="form-check-label" for="Note"> ノート</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Leaf" id="Leaf" name="car[]">
            <label class="form-check-label" for="Leaf"> リーフ</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Skyline" id="Skyline" name="car[]">
            <label class="form-check-label" for="Skyline"> スカイライン</label>
        </div>
    </div>
</form>

<script>
    function formSwitch() {
        radio = document.getElementsByName('maker')
        if (radio[0].checked) {
            // トヨタが選択されたら下記を実行
            document.getElementById('toyotaList').style.display = "";
            document.getElementById('nissanList').style.display = "none";
        } else if (radio[1].checked) {
            // 日産が選択されたら下記を実行
            document.getElementById('toyotaList').style.display = "none";
            document.getElementById('nissanList').style.display = "";
        } else {
            document.getElementById('toyotaList').style.display = "none";
            document.getElementById('nissanList').style.display = "none";
        }
    }
    window.addEventListener('load', formSwitch());
</script>

長ったらしく見えますが、ラジオボタンの部分と <script></script> で書かれたJavaScriptのコードは先ほどのものとは変わっていません。

変わったのは、<div id="toyotaList"> と <div id="nissanList"> で表示される車種一覧がリストではなくチェックボックスになっただけです。

チェックボックスにマークを入れると name="car[]" という配列に車種が入るので、チェックした車種を複数いっぺんにPOSTすることが可能です。

ただ、完成イメージを操作して気づいた方もいらっしゃると思うのですが、自動車メーカーの名前を切り替えても車種のチェック状態は維持されています。

したがってこの状態だと、例えば、トヨタを選んでトヨタの車を選択したはずなのにPOSTで受け渡されるデータには日産の車が混ざってしまうというような事態が生じます。

ということで、次はラジオボタンを切り替えたらチェックボックスの内容はクリアするようにしてみましょう。

JavaScriptでフォームの表示内容を切り替え、非表示の項目はPOSTしない

完成イメージ

自動車メーカーの名前をラジオボタンを選択すると、チェックボックスやセレクトボックスの内容が変わるのは先ほどと同じ。

ただ下の例では、トヨタの中からトヨタ車を選び、日産の項目に移り、再びトヨタに戻るとトヨタ車のチェックボックスがクリアされることが確認できると思います。

 トヨタ

 日産

 RAV4

 シエンタ

 アクア

 ノート

 リーフ

 スカイライン

ソースコード

この機能を実現するためのソースは以下のとおり。

HTML

<form>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="toyota" onclick="formSwitch()" checked>
        <label class="form-check-label"> トヨタ</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="nissan" onclick="formSwitch()">
        <label class="form-check-label"> 日産</label>
    </div>


    <div id="toyotaList">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="RAV4" id="RAV4" name="car[]">
            <label class="form-check-label" for="RAV4"> RAV4</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Sienta" id="Sienta" name="car[]">
            <label class="form-check-label" for="Sienta"> シエンタ</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Aquq" id="Aquq" name="car[]">
            <label class="form-check-label" for="Aquq"> アクア</label>
        </div>
    </div>
    <div id="nissanList">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Note" id="Note" name="car[]">
            <label class="form-check-label" for="Note"> ノート</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Leaf" id="Leaf" name="car[]">
            <label class="form-check-label" for="Leaf"> リーフ</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="Skyline" id="Skyline" name="car[]">
            <label class="form-check-label" for="Skyline"> スカイライン</label>
        </div>
    </div>
</form>

<script>
    function formSwitch() {
        radio = document.getElementsByName('maker')
        if (radio[0].checked) {
            // トヨタが選択されたら下記を実行
            document.getElementById('toyotaList').style.display = "";
            document.getElementById('nissanList').style.display = "none";
            var inputItem = document.getElementById("nissanList").getElementsByTagName("input");
            for(var i=0; i<inputItem.length; i++){
                inputItem[i].checked = "";
            }            
        } else if (radio[1].checked) {
            // 日産が選択されたら下記を実行
            document.getElementById('toyotaList').style.display = "none";
            var inputItem = document.getElementById("toyotaList").getElementsByTagName("input");
            for(var i=0; i<inputItem.length; i++){
                inputItem[i].checked = "";
            }
            document.getElementById('nissanList').style.display = "";
        } else {
            document.getElementById('toyotaList').style.display = "none";
            var inputItem = document.getElementById("toyotaList").getElementsByTagName("input");
            for(var i=0; i<inputItem.length; i++){
                inputItem[i].checked = "";
            }
            document.getElementById('nissanList').style.display = "none";
            var inputItem = document.getElementById("nissanList").getElementsByTagName("input");
            for(var i=0; i<inputItem.length; i++){
                inputItem[i].checked = "";
            }
        }
    }
    window.addEventListener('load', formSwitch());
</script>

注目すべきは46行目から52行目の処理。

ラジオボタンでトヨタが選択されたら toyotaList というIDを持つ要素を表示し、 nissanList というIDを持つ要素は非表示するのはこれまでと同じです。

これに加えて、 nissanList というIDの下にある input タグのアイテムを変数 inputItem と定義し、forループでチェックを全て外しています。

これによりチェックボックスが非表示になると同時にチェックが全て外れるという処理となります。

同様に、入力フォームをクリアするには、

            var inputItem = document.getElementById("nissanList").getElementsByTagName("input");
            for(var i=0; i<selectItem.length; i++){
            inputItem[i].value = "";
            }

としてあげればOKです。

セレクトボックスの選択内容をクリアするには、

            var selectItem = document.getElementById("nissanList").getElementsByTagName("select");
            for(var i=0; i<selectItem.length; i++){
            selectItem[i].value = "";
            }

としてあげればOK。