jQueryでフォームのユーザビリティを強化

jQueryを使ったフォームのユーザビリティを強化する、ちょっとしたサンプルを紹介します。
問合せを目的としたサイトの場合、フォームは重要なページになります。
今回のサンプルは選択項目が多い時など、パッと見でどの項目を選択したか分かり易くするものです。
本当にちょっとしたことですがあるないとでは大分違うかと思います。

選択項目を分かり易くする

■html

<body>
<div id="sample">

<ul>
<li><label><input type="checkbox" />チェック1</label></li>
<li><label><input type="checkbox" />チェック2</label></li>
<li><label><input type="checkbox" />チェック3</label></li>
</ul>
<ul>
<li><label><input type="radio" name="test" />ラジオ1</label></li>
<li><label><input type="radio" name="test" />ラジオ2</label></li>
<li><label><input type="radio" name="test" />ラジオ3</label></li>
</ul>

</div>
</body>

■javascript

$(function() {

	$(":checked").parent().css("background","#ffcccc");
	$("input").click(function(e) {
		var t = e.target.type;
		var chk = $(this).attr('checked');
		var name = $(this).attr('name');
		if(t == 'checkbox') {
			if(chk == true){
				$(this).parent().css('background', '#ffcccc');
			} else {
				$(this).parent().css('background-color', '');
			}
			return true;
		} else if(t == 'radio') {
			if(chk == true){
				$("input[name=" + name + "]").parent().css("background-color","");
				$(this).parent().css("background","#ffcccc");
			}
			return true;
		}
	});

});

解説

まず以下のスクリプトですが、読み込み時にデフォルトでチェックが入っている項目に背景色をつけます。

セレクタ「:checked」を指定することでチェックが入っている要素を選択します。さらに「parent()」で親要素を選択（今回の場合は「labelタグ」）し、css(“background”,背景色)で背景色を設定します。
背景色はなんでもよいです。

ちなみに今回に限らず、「checkbox」や「radio」はlabelタグで囲むことをお薦めします。これだけで項目を選択し易くなります。

	$(":checked").parent().css("background","#ffcccc");

次に「checkbox」や「radio」をクリックした際の処理です。

フォーム部品の「input」をクリックしたら、変数「t」にクリックしたフォーム部品のタイプを格納します。
「checkbox」をクリックした時は「checkbox」が、「radio」をクリックした時は「radio」が格納されます。

変数「chk」にはクリックした部品の「checked」属性を格納します。チェックが入ったら「true」を、チェックが外れたら「false」を格納します。

同様に「name」にはクリックした部品の「name」の値を格納します、これはクリックしたフォーム部品がradioボタンの場合に使います。

	$("input").click(function(e) {
		var t = e.target.type;
		var chk = $(this).attr('checked');
		var name = $(this).attr('name');

ここからはif文を使った判定になります。

まず、先ほどの変数「t」の値が「checkbox」だったら・・・つまりクリックしたフォーム部品が「checkbox」だった場合、同じく先ほどの変数「chk」の値を確認して、対象の背景色を変更します。
チェックが入っていれば、背景色を設定し、チェックがはずれれば背景色を「空」にします。

		if(t == 'checkbox') {
			if(chk == true){
				$(this).parent().css('background', '#ffcccc');
			} else {
				$(this).parent().css('background-color', '');
			}
			return true;
		}

~~同じく変数「t」の値が「radio」の場合は、対象の背景色を設定且つ、それ以外の「radio」ボタンの背景色を「空」にします。~~

以下のスクリプト中の$(this).parent().parent().siblings().children()で選択した「radio」以外の要素を探し出しています。この部分に関してはhtmlの書き方（dom）によって変更する必要が出てくるかと思います。

変数「t」の値が「radio」の場合は、$(“input[name=” + name + “]”)でクリックした「radio」ボタンを同じ「name」の値をもつ「radio」ボタンを選択し、背景を空にします。

一旦背景を空にした後で、対象だけは背景色を設定します。

else if(t == 'radio') {
			if(chk == true){
				$("input[name=" + name + "]").parent().css("background-color","");
				$(this).parent().css("background","#ffcccc");
			}
			return true;
		}