Question

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:

1. 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 )

2. 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

Answer 1

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/