一般的なフォームのチェックボックスは、
と、いう感じ。これを、チェックした時に、checkboxの背景オブジェクトの色を変えることで、どこがチェックされたかわかりやすくするjQueryを使ったスクリプトを紹介。（まぁ、紹介するほどでもないけど）
JavaScriptコード
[js]
$(document).ready(function(){
$(”input[@type='checkbox']“).click(function(){
var chk = $(this).attr(’checked’);
if(chk == true){
$(this).parent().css(”background-color”,”pink”);
}else{
$(this).parent().css(”background-color”,”white”);
}
return true;
});
});
[/js]
動作サンプル
解説
まぁ、解説するまでもないと思うけど…$(”input[@type='checkbox']“)というのは、checkbox全体に対してという指示。checkboxにclassを付けて、それを指定してもいいけど、数が増えると面倒なので。
で、checkbox全体にclickで、そのオブジェクトの属性[checkec]がtrueだったら、そのcheckboxの親のエレメントの背景を変更。$(this).parent().css(”background-color”,”pink”);
もっと簡単・スマートなやり方もあると思うけど、あんまりトリッキーに書くのは好きじゃないのでこんな感じで充分。
これだけでも、だいぶユーザビリティが向上したフォームになると思います。
なお、jQueryについては、
jQuery 関連記事まとめ – Cyokodog::Diary
をみれば、ほぼ網羅できるんじゃないですかね。すばらしい。多謝ですね。
あと、コリスさんところで、よくプラグインのまとめをしてくれてます。
[JS]jQueryのプラグイン33+1選 -2008年10月 | コリス
formのバリデーションに関しては、
Really Easy Field Validation
これがかなり使い勝手がよくて好きなんだけど、prototype.jsなんだよねー。
Popularity: 19% [?]
