WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： プログラム >JavaScript

お問い合わせフォームにおいて、複数選択式のチェックボックスを用意することがあり、その中でもチェックボックスと一緒にテキストボックスを入力する場合もあります。今回の記事で挙げる「その他」などがよくある例ですね。この場合、
①チェックボックスをクリック（タップ）してチェックを入れる
②テキストボックスをクリック（タップ）して任意のテキストを入力する
といった2ステップが必要となります。しかし、ユーザによっては①であるチェックよりも先に、②であるテキストの入力を行う方も少なくないかと思います。
そこで今回は、テキストを入力した時点で連動したチェックボックスに自動でチェックが入るようにする内容をご紹介します。

実装コード

See the Pen
入力とチェックボックスの同期 by k-k-0707 (@k-k-0707)
on CodePen.

項目ごとにチェックボックスを用意、「その他」の項目には詳細を記入するテキストボックスを用意します。こちらのテキストボックスに何か入力されたタイミングで、自動的に「その他」のチェックボックスにチェックが入ります。さらに、入力した内容が削除された場合、チェックも自動的に外れるようになっています。

実装した内容について解説をしていきます。

HTML

まずはHTMLです。項目用のチェックボックス、及び「その他」に該当する箇所にはテキストボックスも一緒に用意します。
「その他」のチェックボックス及びテキストボックスには後述するJavaScriptと同じidを付与しておきます。

<div class="input_area">
  <label>
    <input type="checkbox" id="checkbox01" value="">
    項目01
  </label>
  <label>
    <input type="checkbox" id="checkbox02" value="">
    項目02
  </label>
  
  <div class="other">
    <label>
      <input type="checkbox" id="checkbox03" value="">
      その他
    </label>
    <input type="text" id="checkbox03-text" value="">
  </div>
</div>

JavaScript

続いてJavaScriptです。ここで「その他」のチェックボックスとテキストボックスを連動します。

document.addEventListener("DOMContentLoaded", function() {
  const checkboxText = document.getElementById('checkbox03-text');
  const checkbox03 = document.getElementById('checkbox03');

  checkboxText.addEventListener('change', function() { //①
    if (checkboxText.value) { //②
      checkbox03.checked = true;
      checkbox03.dispatchEvent(new Event('change')); //③
    } else { //④
      checkbox03.checked = false;
      checkbox03.dispatchEvent(new Event('change')); //⑤
    }
  });
});

1. 「その他」のテキストボックス【#checkbox03-text】の内容が変更された際
2. テキストボックスに何か入力がされていた場合
3. 「その他」のチェックボックス【#checkbox03】要素にcheckedを付与する（true）
4. テキストボックスに何も入力されていなかった場合
5. 「その他」のチェックボックス【#checkbox03】要素のcheckedを削除する（false）

これでテキストボックスの内容によって、チェックボックスが連動して動作するようになりました。

まとめ

今回はテキストボックスとチェックボックスの連動についてご紹介しました。ちょっとしたユーザに対する動作軽減を実装することで、フォーム離脱率の解消に繋がるので、フォームに限らず常にユーザ目線での実装を心がけていきましょう。