テーブル行のクリックでチェックボックスをチェックさせる

タイトルそのままのサンプルを見ていきます。動くサンプルはこちら。以下の仕様を追加します。

  • UIも考慮して、LABELを使用する
  • 同じ行にあるボタン(ここでは、「削除」ボタン)のクリックでは、チェック処理しない

ということで、以下がサンプルになります。

やり方的には幾つか考えられましたが、上記のようにしました。 まず、trに対してイベントを仕掛けます。バブリングの仕組みで、trの子孫で発生したイベントをも捉えます。 細かい部分の説明は、すっ飛ばします。tag = $(event.target).prop("tagName"); で、イベント発生源の要素のタグ名を取得できます。INPUT、TD、LABELなどの大文字になります。 そして、if (tag === "INPUT" || tag === "LABEL") { が問題の箇所です。まず、チェックボックスそのものをチェックした場合、 そもそもこのような処理自体不要です。不要というか、逆に処理してしまうと、せっかくチェック状態が変わったのに、それを元に戻してしまうことになります(つまりクリックしても変化しない)。それではまずいので、チェックボックス自体をクリックした場合は、return;して処理を途中で抜けています。checkboxのタグは、INPUTですよね。 ついでに、削除ボタンのタグもINPUTになるので、これで削除ボタンの時も途中で抜けています。そしてLABELです。labelをクリックした時も、そもそもこのような処理自体一切不要です。ブラウザの方でやってくれます。ですので、イベント発生源がLABELの時も、returnして処理を抜けています。そして最後の checkbox.prop("checked", !isChecked); で、現在の状態と逆の状態を設定しています。isCheckedの前にある!で反転しています。以上になります。

一部、紛らわしい情報を補足しておきますと、labelをクリックした時は、タグ名をLABELとするイベントが1回、そしてタグ名をINPUTとするイベントが1回、計2回、イベントハンドラーが呼ばれます。いずれにせよどちらの場合もreturn;処理しますので、これでOKです。

これまたちなみに、return; としている箇所を、return false; としてしまうと、正常に動作しなくなります。これは、return false; だと、イベントの伝播も止めてしまうからですね。

コメントを残す

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