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

複数の選択肢(チェックボックスやラジオボタン)があって、それに対応するテキスト入力欄がある場合、チェックボックスやラジオボタンをクリックしてからテキスト入力欄に文字列を入力するのは面倒です。
テキスト入力欄に文字列を入力した時点で「その項目を選択したい」事実は明白なのですから、チェックボックスやラジオボタンをクリックする手間が無駄な気がします。

というわけで、テキスト入力欄に何か入力された時点で、自動的にその入力欄に対応するチェックボックス(またはラジオボタン)にチェックを入れてあげるのが、閲覧者の手間を省ける良いインターフェイスではないでしょうか。
そんな「テキスト入力欄に連動して自動チェックするラジオボタンとチェックボックス」機能を作ってみました。
動作例は以下の通りです。

上記の動作サンプルでは、

• テキスト入力欄に何か入力したり入力内容を編集したりすると、それに対応するラジオボタンやチェックボックスにチェックが入ります。
• テキスト入力欄の内容を削除すると、それに対応するラジオボタンやチェックボックスのチェックも外れます。

これなら、ラジオボタンやチェックボックスにあらかじめチェックを入れる必要なく、直接テキスト入力欄に文字列を入力できます。
もちろん、事前にラジオボタンやチェックボックスにチェックを入れても何ら問題はありませんが。

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

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

JavaScriptで入力文字数をチェックして対応ラジオボタンやチェックボックスをON/OFFするソース

まずは、JavaScriptソースから掲載します。
このJavaScriptソースは、対象がラジオボタンでもチェックボックスでも共通のソースで動きます。

function AutoCheck(str,checkname) {
	// 入力文字数が1文字以上あるかどうかを確認
	if( str.length > 0 ) {
		// あればチェックを入れる
		document.getElementById(checkname).checked = true;
	}
	else {
		// なければチェックを外す
		document.getElementById(checkname).checked = false;
	}
}

このAutoCheck関数では、2つの引数を受け取っています。

• 第1引数は、テキスト入力欄に入力された文字列を受け取ります。これは入力文字数を調べるためです。
• 第2引数は、対応するラジオボタン(またはチェックボックス)に割り振られたid名です。これはその対象のチェックをON/OFFする処理のためです。

最初に、str.lengthで入力文字数を得ています。if文を使って、1文字以上ある場合と0文字の場合とで処理を分けます。
document.getElementById(checkname)で対象の要素を特定し、.checkedでチェックのON/OFFを保持するプロパティを参照し、値にtrueかfalseを代入しています。
checkedプロパティには、trueを代入すればチェックが入り、falseを代入すればチェックが外れます。これは、チェックボックスでもラジオボタンでも同じです。

チェックボックスまたはラジオボタンと、それらに連動するテキスト入力欄を作るHTMLソース

次に、HTML(入力フォーム)ソースを記述します。
ここでは、ラジオボタンを3つとチェックボックスを3つ作成して、それぞれに連動するテキスト入力欄を計6個作成しています。
ラジオボタンやチェックボックスは、JavaScript側からチェックのON/OFFを制御するため、id属性を使って一意の名称(id名)を付加しています。

<p>
	<label><input type="radio" name="widthtext" id="widthtext1" value="on">選択肢1</label>：<input type="text" name="text1" value="" oninput="AutoCheck(this.value ,'widthtext1');">
	<label><input type="radio" name="widthtext" id="widthtext2" value="on">選択肢2</label>：<input type="text" name="text2" value="" oninput="AutoCheck(this.value ,'widthtext2');">
	<label><input type="radio" name="widthtext" id="widthtext3" value="on">選択肢3</label>：<input type="text" name="text3" value="" oninput="AutoCheck(this.value ,'widthtext3');">
</p>
<p>
	<label><input type="checkbox" name="widthtextA" id="widthtextA" value="on">項目A</label>：<input type="text" name="textA" value="" oninput="AutoCheck(this.value ,'widthtextA');">
	<label><input type="checkbox" name="widthtextB" id="widthtextB" value="on">項目B</label>：<input type="text" name="textB" value="" oninput="AutoCheck(this.value ,'widthtextB');">
	<label><input type="checkbox" name="widthtextC" id="widthtextC" value="on">項目C</label>：<input type="text" name="textC" value="" oninput="AutoCheck(this.value ,'widthtextC');">
</p>

ここで、テキスト入力欄を作るinput要素は以下のような感じで記述しています。

<input type="text" name="text1" value="" oninput="AutoCheck(this.value ,'widthtext1');">

oninput属性を使って、何らかの文字が入力された瞬間(※消された瞬間も含みます)に、先程作成したJavaScriptのAutoCheck関数を実行しています。
その際、引数は以下のように指定しています。

• 第1引数this.valueは、そのテキスト入力欄に入力された文字列です。JavaScript側で文字数をカウントするために丸ごと渡しています。
• 第2引数'widthtext1'は、そのテキスト入力欄に対応するチェックボックスまたはラジオボタンに付加したid名です。引用符を忘れないよう注意して下さい。

上記のように記述すれば、ユーザがラジオボタンやチェックボックスをクリックする手間が省けて良いかも知れません。

oninputイベント：文字を入力した瞬間に発生する

なお、oninputイベントは「ユーザが何らかの文字を入力した瞬間(または消した瞬間)」に発生します。なので、単にフォーカスを次へ移動する目的で[Tab]キーを押した場合には発生しません。
コピー＆ペーストで貼り付けた場合にも反応しますし、日本語入力機能(IME)での入力途中にも反応しますから、なかなか便利です。

(更新日：2017年06月12日)