[jQuery]クリックで発火する範囲を一部だけ除外したい

Question

###前提・実現したいこと
テーブルの行ごとのクリックに対してチェックボックスに適応させたい

###発生している問題・エラーメッセージ
http://kachibito.net/snippets/table-tr-check
上記サイトを参考にしていますが 掲載されているサンプルも含めて、
checkbox 自体をクリックしても 発火するので、
checkbox 自体をクリックして チェックできない という問題が発生しています。

###自分で考えた方法
0. Checkbox を含まない td に対して 1つ1つ class を給付して それらを発火対象にしてもいいですが...

1. Checkbox だけ別に更に発火させるという方法を思いつきましたが...

よりスマートな方法があれば教えてください。
ご回答お待ちしております。

Answer 1

私なら次のようにすると思います。

$(document).ready(function() {
   //tr要素をクリックでイベント発火
   $('table tr').click(function() {
       //td要素からチェックボックスを探す
       var $c = $(this).children('td').children('input[type=checkbox]');
       if($c.prop('checked')){
           $c.prop('checked', '');
       } else {
           $c.prop('checked', 'checked');
       }
   });

   // チェックボックスのクリックイベントで、イベントの伝播を防ぐ
   $("table tr input[type=checkbox]").on("click", function(e){
       e.stopPropagation();
   });
});

Comments

[pac894398]

貴重なご回答をありがとうございました！