6

行のあるテーブルがあります。行には TD (チェックボックスがある) があり、TD にはクリック機能があります。そのため、TD をクリックすると、チェックボックスがオン/オフになります。

TDをクリックすると正常に動作しますが、チェックボックスをクリックしてもチェックボックスの（視覚的な）値は変わりません（チェック/チェック解除されません）

必要な状況は次のとおりです。

  1. チェックボックスをクリックすると、チェックボックスの（視覚的な）値が変化し、関数を呼び出すことができます（たとえば、AJAX呼び出しを行うため）

  2. TD をクリックすると、チェックボックスの (視覚的な) 値が変化し、関数を呼び出すことができます。(たとえば、AJAX 呼び出しを行う場合)

どうすればこれを達成できますか?

サンプルコード

4

5 に答える 5

11

問題は、TDをクリックしたときにものクリック ハンドラが起動することです。これは、 の既定のクリック ハンドラと のカスタム クリック ハンドラの両方によって が変更されるcheckboxことを意味します(これらは互いに打ち消し合います)。解決策は、 のクリックが にバブリングしないようにすることです。Knockout では、このバインディングを使用してこれを行うことができます: .checkboxcheckboxTDcheckboxTDclick:function(){return true}, clickBubble:false

ここでそれが実行されています：http://jsfiddle.net/mbest/Eatdh/12/

ただし、 a を使用する方がより良いアプローチだと思いますlabel（他の回答を参照）。

于 2012-05-30T22:19:31.320 に答える
2

クリック イベントの問題を回避するには、label要素を使用してより広い領域をクリック可能にします。ここでは、ラベル全体を占めるようにラベルをブロック要素にしましたtd:

<td>
    <label style="display: block">
        <input type="checkbox" data-bind="checked: checkBox" />
    </label>
</td>

http://jsfiddle.net/mbest/LsxSh/を参照してください

于 2012-05-31T01:32:55.410 に答える
1

Tdイベントが入力のチェッククリックイベントをオーバーライドしているようです

于 2012-05-30T20:27:33.547 に答える
0

これは完全に DRY ではありませんが、迅速で機能的です: fiddle

<td data-bind="click:tdClick">
      <input type="checkbox" data-bind="checked: checkBox, click:tdClick" />
</td>
于 2012-05-31T00:05:45.187 に答える
0

チェック ボックスをクリックすると、td のクリック ハンドラー コードが呼び出されます。

self.checkBox(!self.checkBox());

これにより、チェックが削除されます。

于 2012-05-30T20:23:48.083 に答える