JavaScript
jQuery

行クリックでチェックボックスをON/OFFしたい

More than 1 year has passed since last update.

表の中にあるチェックボックスの場合、行クリックでチェックON/OFFさせたいなんてことあると思います。


HTML

<table>

<tr>
<td><input type="checkbox" name="hoge" value="1"></td>
<td>1行目</td>
</tr>
<tr>
<td><input type="checkbox" name="hoge" value="2"></td>
<td>2行目</td>
</tr>
<tr>
<td><input type="checkbox" name="hoge" value="3"></td>
<td>3行目</td>
</tr>
</table>

行クリックでチェックボックスをトグルさせたいのでこんな処理を書いたところ、チェックボックス自体のクリックが効かなくなりました。両方のイベントでON/OFFしているので結局元に戻っているかんじ。


JavaScript

$('[name=hoge]').parents('tr').click(function(){

$(this).find('[name=hoge]').prop('checked', !$(this).find('[name=hoge]').prop('checked'));
});

以下のようにstopPropagation()でバブリングを止めてあげたらうまくいきました。


JavaScript

$('[name=hoge]').click(function(e){

e.stopPropagation();
}).parents('tr').click(function(){
$(this).find('[name=hoge]').prop('checked', !$(this).find('[name=hoge]').prop('checked'));
});