1

チェックボックスのオン/オフを切り替える単純な js 関数を作成してから、親 (この場合は TD) をクリックします。この関数は、TD の任意の場所をクリックすると期待どおりに機能します。

ただし、チェックボックス自体をクリックしても何も起こりません。
私が知りたいのは、なぜこれを行うのか、そして最善の回避策は何ですか?

これをデモするためにjsfiddleを提供しました。

そして、ここに私のjs関数があります:

$("td.onoff").click(function() {
    var objCheckbox = $(this).find("input[type=checkbox]");
    if( objCheckbox.length >= 1 ) {
        objCheckbox.prop("checked", !objCheckbox.prop("checked"));
    }
});

ありがとう。

4

5 に答える 5

5

あなたはする必要がありby pass event code when source of event is not td with class onoffます、あなたはこのようにすることができます。

ライブデモ

$(function() {
    $("td.onoff").click(function(event) {          
        if(event.target.className != 'onoff') return;
        var objCheckbox = $(this).find("input[type=checkbox]");
        if( objCheckbox.length >= 1 ) {
            objCheckbox.prop("checked", !objCheckbox.prop("checked"));
        }
    });
});

</p>

于 2012-11-21T09:05:52.400 に答える
1

このように動作する理由は、inputが親clickイベントをトリガーし、その時点でclickedではthisなくチェックボックスになるため、何も選択されず、アクションが実行されないためです。td.find("input[type=checkbox]")

他の回答に代わる方法は、clickイベントを入力に直接バインドし、伝播を停止することです。次に例を示します。

$("td.onoff > input").click(function(e) {
  e.stopPropagation();        
});

ここにデモがあります

于 2012-11-21T09:11:23.423 に答える
1

クリックされた要素のタイプを確認してください。これがないと、存在しない要素を取得しようとしています。

$(function() {
    $("td.onoff").click(function() {
        var type = $(this).attr('type');
        if ( type != "checkbox" ) {
            var objCheckbox = $(this).find("input[type=checkbox]");
            if( objCheckbox.length >= 1 ) {
                objCheckbox.prop("checked", !objCheckbox.prop("checked"));
            }
        }
    });
});​
于 2012-11-21T09:04:59.453 に答える
0

以下を追加します。

$("td.onoff :checkbox").click(function(event) {
    event.stopPropagation();
});

これにより、チェックボックスをクリックしたときにクリックイベントがコンテナにバブリングするのを防ぎます。

于 2012-11-21T09:11:29.713 に答える