0

テーブルラインクリックのチェックボックスをオンにするように求められました。以下のスクリプトは機能していますが、チェックボックスを直接クリックすると機能せず、テーブルラインをクリックした場合にのみ機能します。

私はこのhtmlを持っています：

<tr class="linha_tela" id="4">
   <td>Profile</td>
   <td>Clientes</td>
   <td>
     <input type="checkbox" checked="checked" id="controller_4" name="controllers[]" value="4" />
  </td>
</tr>

そして、これは私のスクリプトです：

    $('.linha_tela').click(function(){
        var checkbox = $(this).find(':checkbox');
        checkbox.attr('checked', !checkbox.attr('checked'));
    });

ありがとう

4

4 に答える 4

3

何が起こっているのかというと、チェックボックスをクリックするとチェックボックスが切り替わり、イベントハンドラーがトリガーされてチェックボックスがオフになります。これは基本的に瞬時に発生するため、まったく機能しないように見えます。

これを試して：

$('.linha_tela').click(function(event) {
    if (!$(event.target).is(':checkbox')) {
        var checkbox = $(this).find(':checkbox');
        checkbox.attr('checked', !checkbox.attr('checked'));
    }
});

編集：これが動作するjsfiddleデモです。

于 2012-04-11T19:35:53.203 に答える
2

これは、チェックボックスがテーブルの行にあるために発生しているため、チェックボックスをクリックすると、ステータスが変更されます（チェックボックスが機能するため）。

次に、クリックがtrまでバブリングし、スクリプトを実行して、ステータスを元に戻します。

イベントターゲットをチェックする必要があります。入力でない場合は、実行してください。入力されている場合は、実行しないでください。

変更されたスクリプトは次のとおりです。

$('.linha_tela').click(function(event) {

    if (event.target.nodeName != 'INPUT') {
        var checkbox = $(this).find(':checkbox');
        checkbox.attr('checked', !checkbox.attr('checked'));
    }
});

試してみるためのjsfiddleへのリンク：http： //jsfiddle.net/yDEyC/

于 2012-04-11T19:36:24.443 に答える
1 
$(":checkbox").click(function(event) {
  event.stopPropagation();
});

これは機能するはずです。

于 2012-04-11T19:39:01.893 に答える
1

コードシナリオを示すjsfiddleは次のとおりです。

http://jsfiddle.net/sAfTT/

発生している問題は、HTMLのイベントでよくある問題です。イベントが発生すると、適用可能なすべての要素に対して、最も近いものから最も遠いものの順に発生します。これはバブリングと呼ばれます（逆に機能するキャプチャもあります）。 http://www.quirksmode.org/js/events_order.html

したがって、実際には、チェックボックスをクリックすると、行もクリックされるため、ハンドラー呼び出しは次のようになります（最初にボックスがオフになっていると仮定します。必要に応じて逆チェック/チェックを外します）。

  1. チェックボックスがクリックされました：チェックボックスをオンにします
  2. 泡立ててもいいですか？はい
  3. 行がクリックされました。イベントハンドラーはありますか？はい
  4. イベントハンドラー（あなたのもの）を起動します。これにより、チェックボックスがオンになっているかどうかが決まります。です。
  5. チェックボックスがオンになっているため、オフにします。
  6. 泡立ててもいいですか？はい
  7. テーブルがクリックされました。イベントハンドラーはありますか？いいえ
  8. ドキュメントがクリックされました。イベントハンドラーはありますか？いいえ。

チェックボックスにイベントハンドラーを直接アタッチして、バブリングを防ぐことができます

$(':checkbox').click(function(e){
    e.preventDefault();
    e.stopPropagation();
})​

編集：jsfiddleでpreventのデフォルトが正しく機能するようにすることはできませんでしたが、他の回答によって提供された概念もうまく機能します。

于 2012-04-11T19:44:31.427 に答える