フォームのチェックボックスをクリックすると別のテキストボックスにテキストを挿入する方法

Posted on by

ウェブフォームを作成する際、チェックボックスの選択に応じて
テキストボックスの内容を変更したい場合があります。
例えば、ユーザーがチェックボックスをクリックすると、
その内容をテキストボックスに反映させる機能です。

本記事では、チェックボックスの選択状態に応じてテキストボックスにテキストを挿入する方法を、
シンプルなHTMLとJavaScriptを使って実装する手順を紹介します。

実装方法

HTMLの作成

以下のコードは、複数のチェックボックスと、選択した内容を表示するテキストボックスを作成します。

<form>
    <label><input type="checkbox" id="check1" value="選択1"> 選択1</label>
    <label><input type="checkbox" id="check2" value="選択2"> 選択2</label>
    <label><input type="checkbox" id="check3" value="選択3"> 選択3</label>
    <br>
    <input type="text" id="output" placeholder="ここに挿入されます">
</form>
  • input type="checkbox" を使い、3つのチェックボックスを用意
  • value 属性にそれぞれの選択肢の値を設定
  • input type="text" を用意し、選択した内容を表示

JavaScriptの実装

チェックボックスの状態が変わるたびに、選択された項目のテキストを取得し、
テキストボックスに挿入するスクリプトを作成します。

document.addEventListener("DOMContentLoaded", function() {
    const checkboxes = document.querySelectorAll("input[type='checkbox']");
    const output = document.getElementById("output");

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener("change", function() {
            let selectedText = Array.from(checkboxes)
                                    .filter(chk => chk.checked)
                                    .map(chk => chk.value)
                                    .join(", ");
            output.value = selectedText;
        });
    });
});

コードの解説

DOMContentLoaded イベント

このイベントを利用することで、ページが完全に読み込まれた後にスクリプトが実行されるようになります。

document.addEventListener("DOMContentLoaded", function() {

チェックボックスの状態を監視

すべてのチェックボックスを querySelectorAll("input[type='checkbox']") で取得し、
それぞれに change イベントを追加。

checkboxes.forEach(checkbox => {
    checkbox.addEventListener("change", function() {

選択されたチェックボックスの値を取得

Array.from(checkboxes) でチェックボックスのリストを配列化し、
filter() でチェックされた項目だけを選別します。

let selectedText = Array.from(checkboxes)
                        .filter(chk => chk.checked)
                        .map(chk => chk.value)
                        .join(", ");

テキストボックスへ挿入

取得したテキストを input の value に設定し、
チェックボックスの選択内容がリアルタイムで反映されるようにします。

output.value = selectedText;

この方法のポイント

✅ 複数選択対応：チェックされた項目が増減するとリアルタイムで変更される。
✅ シンプルなコード：数行のJavaScriptで簡単に実装可能。
✅ ユーザー体験向上：チェックのたびに即座に入力フィールドに反映。

応用例

このスクリプトを応用することで、以下のような機能も実装できます。

  • デフォルトの値を設定：ページ読み込み時に特定の項目を選択済みにする。
  • 選択リミットの追加：例えば、3つのチェックボックスのうち2つまでしか選べない制約を設ける。
  • 選択内容を他の要素に反映：p タグや div に表示することでフォーム以外の用途にも活用。

まとめ

本記事では、チェックボックスのクリックに応じて、テキストボックスに
選択した内容をリアルタイムで反映させる方法を解説しました。
JavaScriptの change イベントと filter(), map(), join() を活用することで、
シンプルかつ効果的な処理が可能になります。

このテクニックを活用すれば、チェックボックスを用いたフォームのUX（ユーザー体験）
を向上させることができます。
ぜひ、実装してみてください！