ターブル(table)の行(tr)をクリックしたらその行にあるチェックボックスがチェックされるjs実装

html
jQuery

やりたいこと：行(tr)をクリックしたらその行にあるチェックボックスがチェックされるようになる

  • htmlのテーブル(table)の各行にチェックボックスを内蔵しています
  • チェックボックスがクリックしたら、チェック/アンチェックされることは一般的です
  • その行をクリックすると、チェックボックスが自動にチェックされるようになれれば、操作しやすいUIになります
    • チェックボックスだけでは小さくて、合わせるのは少し手間です
    • 但し、その行にほかのアンカー/ボタンがあったら、この実装があまりお勧めできません
  • jQuery で実装してみました 
    $(document).ready(function() {
　// 行をクリックしたら
    $('tr').click(function(event) {
        $(':checkbox', this).trigger('click');
    });
});
  • デモページは以下のようです

問題点：チェックボックスをクリックしても反応しない

  • テーブルの行(tr)をクリックしたら、チェックボックスがチェック/アンチェックされます（望まれる動き）
  • チェックボックスに直接にクリックすると、チェックボックスの状態の変化はありません
    チェックボックスをクリックしても変化なし
  • なぜか変な動きとなりました

原因：チェックボックスと行(tr)がクリックイベントより二重動作してしまいました

  • javascriptのデバッグでクリック後の動きを観察してみました、チェックボックスがクリックされると、最初チェックボックスが動作され：チェック/アンチェックされます。次に行(tr)にクリックイベントが到着し、javascriptのコードで再度チェックボックスをチェック/アンチェックされます。二回動作して、見た目では、状態は変わりません
  • チェックボックスの二重動作防止のため、javascriptのコードを以下のように変更 
    $(document).ready(function() {
    $('tr').click(function(event) {
　　// チェックボックスがチェックされたら無視
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });
});

     

  • 上記変更で行のどこにクリックしても、チェックボックスが動作されます