knockoutjs checkbox and click on parent td

javascript, knockout.js

Solution

To avoid the click event issues, use the `label` element to make a larger area clickable. Here I've made the label a block element so it takes up the whole `td`:

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

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

Problem

I have a table with a row. The row has a TD(with a checkbox in it) and on the TD I have a click function. So that when the TD is clicked the checkbox will get checked/unchecked. It works fine when I click on the TD , but when clicking on the checkbox the (visual) value of the checkbox does not change( It does not get checked/unchecked ) The wanted situation is: When I click the checkbox, the (visual) value of the checkbox changes and I can call a function.( for example to make an AJAX call ) When I click on the TD, the (visual) value of the checkbox changes and I can call a function. ( for example to make an AJAX call ) How can we achieve this? Sample Code

Original source