チェックボックスのチェックで、背景などに色を付ける(click編)

こちらをお読みになる前に、まず【change編】をご確認下さい。動くサンプルはこちら。ここでは、clickイベントで同様の事を実現する方法を見てみます。まず述べておきますと、jQuery Ver.1.4.2以上を使う場合、又は、IE8以下をサポートしない場合は、change編を使った方が分かり易いです。jQuery Ver.1.4.2未満でIE8以下をサポートする場合、changeだと期待する動作をしてくれませんので、その時は、click編をお使い下さい。また、勉強がてら、click編は役に立ちます。ということで、以下コードです。

change編と比較して異なる箇所は、下のイベント付与とイベント発動部分です。chkbox.on("change", onChecked); が、 chkbox.on("click", onChecked); に変わるのは当然として、問題はその下のイベント発動部分です。 まず、changeとclickイベントの違いとして、clickイベントを発動させるとクリックした事になるので、チェックボックスのチェック状態が変化してしまいます(一方、changeでは変化しません)。なので、ここでは、(triggerではなく)triggerHandlerとしています。triggerHandlerは、triggerと異なりイベントハンドラだけを実行するという違いがあります。(なのでわざわざ、triggerHandlerと名前がなっていますね。そもそも、この場合、「イベント発動」という表現も適切では無いかも知れません)とすると、chkbox.filter(":checked").triggerHandler("click"); と1行だけ書けばOKのような気がしますが、これではまだバグありです。triggerHandlerは、triggerと異なり、jQueryオブジェクトの最初にマッチした要素のみにしかイベントを発動しないという特徴があります。なのでこれでは、デフォルトで複数個にチェックが入っている場合、対応できません。そこで上記のように、.each()を使い、各jQueryオブジェクトに対して、clickイベントを発動しています。

changeの時と比べると、行数も増えてしまい、少々ややこしくなってしまいました。ところで、この3行部分、小難しい方法を使って1行で下記のように書くこともできますので、軽く紹介しておきます。

$.proxy()という、thisの文脈を指定できるユーティリティ関数を使うと、上記のように1行で書けます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です