にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

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

ウェブ上に掲載する入力フォームでは、ラジオボタンやチェックボックスに1対1で対応するテキスト入力欄が存在する場合があります。そのような場合は、テキスト入力欄に何か文字列が入力されただけで、対応するラジオボタンやチェックボックスに自動的にチェックが入るとクリック操作の手間が省けて便利です。そんな「入力欄に1対1で対応するラジオボタンやチェックボックスに自動でチェックを入れる」機能を作ってみました。

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

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

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





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

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

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

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

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

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

まずは、JavaScriptソースから掲載します。
この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を保持するプロパティを参照し、値にtruefalseを代入しています。
checkedプロパティには、trueを代入すればチェックが入り、falseを代入すればチェックが外れます。これは、チェックボックスでもラジオボタンでも同じです。

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

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

HTMLソース

<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)での入力途中にも反応しますから、なかなか便利です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---