On Emotionのイシハラです。

JavaScriptの2大フレームワークといえばprototype.js、jQueryではないでしょうか。

prototype.jsばかり使って、jQueryをおろそかにしてしまっていたので、使ってみました。

セレクターがいいですねー。便利です。

めったにコードは公開しないのですが、ちょっと便利っぽいものを紹介します。

チェックボックスがズラーっと並んでいると、結構見づらくて、解像度が高いディスプレイだとチェックの部分が小さくて、どこをチェックしたのかわかりにくくなってしまいます。

そのうえ、チェックボックスは小さい四角なので、チェックしづらいということが多いです。

チェックボックスが小さいのはラベルタグで挟むと文字部分のクリックでチェックが入るのでいいのですが、たくさんあると見づらいなぁと思ってました。

ということで、チェックが入っている項目に色をつけるスクリプトです。

jQueryを使います。


$(function(){
$("input:checkbox").click(function(){
if (this.checked) {
$(this).parent(0).addClass("test1");
}else{
$(this).parent(0).removeClass("test1");
}
});
});

単純にクリックしたときに判定してcssを追加・削除するだけです。

チェックボックスが特定のグループだったらフィルターをかけると良いです。

ソースを見たほうが早いかもしれません・・・。

サンプルページ

それでは。