2

テーブルセル内にチェックボックスがあり、セルをクリックしたときにチェックしたい（チェックボックスをクリックしたときだけでなく）。

私はこのコードを使用しています：

$('.check_it').click( function () {
    if ($(this).find('.my_checkbox_class').is(':checked')) {
        $(this).find('.my_checkbox_class').removeAttr('checked');
        checked_counter--;
    }
    else {
        $(this).find('.my_checkbox_class').attr('checked', 'checked');
        checked_counter++;
    }
});

正常に動作しますが、チェックボックスをクリックすると、このイベントも発生し、checked_counter変数が間違った値になります - 誰かがそれを修正する方法を教えてもらえますか? チェックボックスをクリックして、テーブルセルをクリックしてチェックしたい。

編集、これが私のhtmlです：

<td class="check_it"><input type="checkbox" class="my_checkbox_class" /></td>
4

3 に答える 3

2 
$('.my_checkbox_class').click(function(ev){
    ev.stopPropagation();
});

トリックを行う必要があります。これにより、イベントのバブルが停止するため、td に到達せず、チェックボックスのデフォルトの動作のみが実行されます。

于 2013-02-06T10:22:36.797 に答える
2

クリック イベントは、DOM ツリーを上って親要素に伝達されます。したがって、チェックボックスをクリックすると、 のイベントもトリガーされます<td>。チェックボックスでイベントをキャッチし、そこで伝播を停止することで、これを回避できます (これにより、2 つ目のイベント ハンドラーが追加され、イベント バブリングに依存する他の機能が壊れる可能性もあります)。

私がお勧めする別の方法は、トグルを行う前に、同じハンドラー内でイベントの発生元を確認することです。これは、jQuery イベント オブジェクトのtargetプロパティを利用します。

$('td').click(function(e)
{
    if ( $(e.target).is('[type="checkbox"]') ) return;

    var $chkBox = $(this).find('.my_checkbox_class');
    var state = $chkBox.is(':checked');
    checked_counter += (state ? -1 : 1);
    $chkBox.prop('checked', !state);
});

実際に行っているのはチェックボックスの状態の切り替えだけなので、元のクリックハンドラーもリファクタリングしたことに注意してください（使用する必要がありますprop）。これは現在のハンドラーを置き換えます。is に加えてではありません。

于 2013-02-06T10:24:07.183 に答える
0

使用する$(".my_checkbox_class").click(function() {}

コードによると、$('check_it').click(function() {}これには行の詳細だけでなくチェックボックスも含まれている可能性があるため、この関数は両方の場合に呼び出しを行い、これにより絞り動作が発生します。

于 2013-02-06T10:21:46.577 に答える