[jQuery]tableのtdをクリックしてcheckboxにチェックを入れる方法

Read More

tableのtdクリックしてcheckbox(radioでも可)にチェックを入れる方法。




あれやこれやと色々試したところ最後はシンプルに実装できたのでメモしておく。



■tdをクリックしてcheckboxにチェックを入れる

■サンプルコード
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(function() {
  $('[name^="chk_"]').click(function(event){
    event.stopPropagation();
  });
  $('[name^="chk_"]').parent('td').click(function(){
    $(this).children('[name^="chk_"]').trigger('click');
  });
});
</script>
</head>
<body>
<table>
  <tr>
    <td>
      <input type="checkbox" name="chk_1" />sample1
    </td>
    <td>
      <input type="checkbox" name="chk_2" />sample2
    </td>
  </tr>
</table>
</body>
</html>



■動作サンプル
http://xirasaya.com/demo/10/



キモの部分はtrigger()を使っているところとevent.stopPropagation()ってとこ。
checkboxそのものをクリックするとイベントが重複して発生してしまうのでそれを制御している。



動作サンプルの方ではlabelタグを使っている状態のところにtdクリックを適用させることを想定して組んだので、先述したものより若干コードが多くなっている。



tdをクリックしてチェックボックスにチェックを入れる方法、と書いたが、これを応用すれば行クリック(tr)でチェックを入れるのも実装することができる。




動作はfirefox、chrome、IE6、IE7、IE8、IE10で確認した。

まあXPサポートが終わった今となっていは必ずしもIE6、IE7に対応させる必要はないんだけど。







参考サイト
http://kachibito.net/web-design/checkbox-table.html
http://www.webstuffshare.com/2010/02/code-snippet-jquery-checkbox-table/
http://semooh.jp/jquery/cont/doc/event/





Comments(4)

1  みやび  2014/08/07 (木) 08:25 ID:jwKga9N15
clickの戻り値はそのままjQueryオブジェクトなので、
こんな感じにすれば変更にも強くなりそうですね
(代わりに可読性が落ちるかも?)
$('[name^="chk_"]').click(function(event){
event.stopPropagation();
})
.parent('td').click(function(){
$(this).find('[name^="chk_"]').trigger('click');
});

2  シラサヤ  2014/08/07 (木) 09:13 ID:v8gOU9s15
なるほど、変数に入れたりも考えたけどそうやって繋いでもいいのか。

おー勉強なった




3  みやび  2014/08/08 (金) 08:35 ID:NYDxgYL15
可読性上げるなら変数に一度入れるのも有力候補ですね

CSSセレクターを単純に使うと、
終わりからさかのぼって計算するという仕様のせいで、HTML文章を総嘗めすることになるらしいんで、
(日本語の別の人のブログを見ただけですが)
実践的に書くならこんな感じに落ち着くと思います

<table id="users_list">
<tr><td><input type="check" name="chk_1">...</tr>
<tr>...
<tr>...
</table>

// 変数の前の$は自分で勝手にjQueryのオブジェクトって分かるようにしたいから付けただけ
var $cache = $('#users_list').find('[name^="chk_"]');
$cache.click(...);
$cache.parent('td').click(...);

// もしくはこんな感じ
var $cache = $('#users_list').find('[name^="chk_"]');
$cache.click(...)
.parent('td').click(...);

4  シラサヤ  2014/08/08 (金) 12:12 ID:WpAFgvp15
> CSSセレクターを単純に使うと、
終わりからさかのぼって計算するという仕様のせいで、HTML文章を総嘗めすることになるらしい


↑これはブラウザ依存ぽいけどねえ。
Chromeなんかはjavascriptが他のに比べて高速に動作するのが売りなわけだけど、それってばつまり他のブラウザと解析の動きが違うってことなわけだよねえ。
調べたことないからよく知らんけど。




変数にオブジェクト入れて使うのが定石っぽい気がするのでそれで。

イベントキャッチをチェーンさせて使うのはちょっと無しかな。
普通に読みにくい。