knockoutjsチェックボックスをオンにして、親tdをクリックしてください

Question

私は行があるテーブルを持っています。行にはTD（チェックボックス付き）があり、TDにはクリック機能があります。 TDがクリックされると、チェックボックスがオン/オフになります。

私はTDをクリックしたとき、それが正常に動作しますが、チェックボックスをクリックすると、チェックボックスの（視覚的な）値は変化しません（それは/未チェックにチェックされません）

希望の状況は次のとおりです。

1. 私は、チェックボックス、チェックボックスの変更（視覚的な）値をクリックして、私は関数を呼び出すことができます。（例えばAJAX呼び出しを作るために）

2. 私はTDをクリックすると、チェックボックスの（視覚的な）値が変化し、私は関数。 （例えば、AJAXコールを行う）

私たちはこれをどのように達成できますか？チェックボックスをクリック

Sample Code

Answer 1

。それは全体のtdを占めるので、ここで私はラベルブロック要素を加えました：

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

http://jsfiddle.net/mbest/LsxSh/

Answer 2

は、TDのクリックハンドラのコードを呼び出す：

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

これはチェックを削除します。

Answer 3

Tdのイベントは、入力のチェックをクリックしてイベントを上書きしているようだ

Answer 4

問題TD火災のためのクリックハンドラはまた、あなたがcheckboxデフォルトのクリックハンドラの両方で変更されます意味checkboxを、クリックしたときにということですcheckboxの場合はTDのカスタムクリックハンドラ（お互いを相殺します）の場合解決策は、checkboxのクリックがTDにバブリングするのを防ぐことです。あなたはこのバインディングでノックアウトでこれを行うことができます：click:function(){return true}, clickBubble:false。

は、ここでは、アクションである：http://jsfiddle.net/mbest/Eatdh/12/

私は思います、しかし、labelを使用して、より良いアプローチは（私の他の回答を参照）であること。

Answer 5

これは非常に乾燥していないが、その迅速かつ機能：より大きなエリアクリッカブルを作るためにlabel要素を使用して、クリックイベントの問題を回避するにはfiddle

<td data-bind="click:tdClick"> 
     <input type="checkbox" data-bind="checked: checkBox, click:tdClick" /> 
</td>