Presented by Nishishi via Movable Type. Last Updated: 2014/02/04. 22:45:18.

入力欄に対応するラジオボタンに自動でチェックを入れる

複数の選択肢(チェックボックスやラジオボタン)があって、それに対応するテキスト入力欄がある場合、チェックボックスやラジオボタンをクリックしてからテキスト入力欄に文字列を入力するのは面倒ですよね。
テキスト入力欄に文字列を入力した時点で、「その項目を選択したい」事実は明白なのだから、テキスト入力欄に何か入力された時点で、自動的にその入力欄に対応するチェックボックス(またはラジオボタン)にチェックを入れてあげるのが、良いインターフェイスだと思います。

というわけで、そんな「テキスト入力欄に連動して自動チェックするラジオボタン」機能を作ってみました。




上記の3つのテキスト入力欄に何か入力したり入力内容を編集したりすると、それに対応するラジオボタンにチェックが入ります。(ただし、チェックが入るのは編集後に『入力欄から外に出た瞬間』であって、『入力した瞬間』にはチェックされません。)

この「テキスト入力欄に連動して自動チェックするラジオボタン」機能を作るソースは以下の通り。
まず、JavaScript:

<script type="text/javascript"><!--
   function AutoCheck(checkname) {
      document.getElementById(checkname).checked = true;
   }
// --></script>

このAutoCheck関数では、引数として任意のラジオボタン(またはチェックボックス)に振られたID名を受け取っています。そのラジオボタンにチェックを入れる作業を行います。

んで、HTML(入力フォーム):

<form>
   <input type="radio" name="wt" id="wt1" value="1" /><label for="wt1">選択肢1</label>:<input type="text" name="t1" value="" onchange="AutoCheck('wt1');" /><br />
   <input type="radio" name="wt" id="wt2" value="2" /><label for="wt2">選択肢2</label>:<input type="text" name="t2" value="" onchange="AutoCheck('wt2');" /><br />
   <input type="radio" name="wt" id="wt3" value="3" /><label for="wt3">選択肢3</label>:<input type="text" name="t3" value="" onchange="AutoCheck('wt3');" /><br />
</form>

テキスト入力欄を作るinput要素に対して、onchangeイベントから先ほどのAutoCheck関数を呼び出しています。このとき、AutoCheck関数の引数には、対応するラジオボタンのID名を入れています。「wt1」とか「wt2」とか。
onchangeイベントは、内容が変化した場合に発生するイベントです。

このようにしておくと、ユーザがラジオボタンをクリックする手間が省けて良いかも知れません。

ただし、onchangeイベントが発生するのは、「テキスト入力欄の内容が変化した後、テキスト入力欄からフォーカスがなくなったとき」です。
つまり、テキスト入力を完了して、他の項目へ移動しようとしたときに自動チェックが行われるのですよね。入力した瞬間に自動チェックが行われるわけではありません。なので、「対応するラジオボタンのチェック忘れを自動的に防ぐ」程度の機能にしかならないかも知れません。(^_^;;;

他に使えそうなイベントとしては、onkeypressイベントがあります。何かキーが押された瞬間に発生するイベントです。これなら良さそうですが、[Tab]キーによる入力欄の移動でもイベントが発生してしまったり、日本語入力機能(IME)を経由しての入力には反応しなかったり、いろいろ問題があります。
onfocusイベントもありますが、入力欄にカーソルを入れた瞬間に発生するので、やはり[Tab]キーによるフォーム間の移動中に一時的に入っただけでもチェックされてしまうので、問題があります。

まあ、補助的な機能ということで、そんなに厳密に対応しなくても良いと考えてもいいんじゃないでしょうかね。(^_^;)
(そんな結論か。^^;)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど