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

表の中にあるチェックボックスの場合、行クリックでチェック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'));
});