その他のオプションを選択した場合にテキストボックスを表示する方法

Posted on by

フォームを作成する際、ユーザーに複数の選択肢を提供し、その中で「その他」を選択した場合に追加の入力フィールド（テキストボックス）を表示する方法は非常に便利です。
この記事では、シンプルなHTMLとJavaScriptを使ってこの機能を実装する方法を説明します。

必要なHTML

まず、HTMLの基本構造を見てみましょう。
ここでは、いくつかのチェックボックスオプションと「その他」のオプションを含むフォームを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>その他オプションの表示</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <form>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="checkbox" id="option1" name="options[]" class="custom-control-input" value="option1">
                <label class="custom-control-label" for="option1">オプション 1</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="checkbox" id="option2" name="options[]" class="custom-control-input" value="option2">
                <label class="custom-control-label" for="option2">オプション 2</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="checkbox" id="otherOption" name="options[]" class="custom-control-input" value="other">
                <label class="custom-control-label" for="otherOption">その他</label>
            </div>
            <div id="otherText" style="display:none;" class="mt-3">
                <input type="text" id="otherTextInput" name="other_text" class="form-control" placeholder="詳細を入力してください">
            </div>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $('input[name="options[]"]').change(function() {
                if ($(this).is(':checked') && $(this).val() === 'other') {
                    $('#otherText').show();
                } else if ($('input[name="options[]"]:checked').filter(function() { return $(this).val() === 'other'; }).length === 0) {
                    $('#otherText').hide();
                }
            });

            if ($('input[name="options[]"]:checked').filter(function() { return $(this).val() === 'other'; }).length > 0) {
                $('#otherText').show();
            }
        });
    </script>
</body>
</html>

コードの説明

HTML部分

formタグ内に複数のチェックボックスオプションを作成しています。
その他オプションには特定のidとvalueを設定し、後でJavaScriptでこの値を参照します。
divタグのid="otherText"は、その他オプションが選択された場合に表示されるテキストボックスです。初期状態では非表示（display:none;）に設定しています。

JavaScript部分

ページが読み込まれた際に実行されるスクリプトを$(document).ready()内に記述しています。
$('input[name="options[]"]').change(function() { ... });でチェックボックスの状態が変更されたときに実行される関数を定義しています。
チェックボックスが選択された場合、その値がotherであるかを確認し、該当する場合はテキストボックスを表示します。
そうでない場合、他のオプションが選択されているかを確認し、その他オプションが選択されていない場合はテキストボックスを非表示にします。
ページ読み込み時に、その他オプションが既に選択されている場合はテキストボックスを表示します。

まとめ

この方法を使えば、ユーザーが「その他」のオプションを選択したときに
追加の入力フィールドを表示することができます。
シンプルなHTMLとJavaScriptの組み合わせで、柔軟でユーザーフレンドリーなフォームを作成しましょう。