Question

I’d like to be able to click on the td element in a table and have it check or uncheck a checkbox in a sibling td on the same row.

• Clicking the checkbox should still
  work normally.
• Clicking the td
  element the checkbox resides in
  should also check the checkbox.
• Clicking different td’s should not
  require double clicks (reset click)
  due to a bad toggle implementation

Fiddle:
http://jsfiddle.net/cJ2us/

Please note, yes this is very similar to a number of questions, please don’t link any duplicates unless you actually understand the problem I have and how the answers given there do not fit my question. e.g.

Jquery event on wrapped input radio override 'checked' event
Not checkboxes

jQuery onclick div checks a checkbox
toggle doesn’t allow clicking on seperate td’s to carry out each check and uncheck

Find the Checkbox in Sibling <td> and check it using jQuery doesn’t fit this example, code doesn’t actually work how answerer thinks

In saying that, if you find a dupe that fits let me know! I just want a workable solution.

Answer 1

This works, is it what you want?

$("td").click(function(e) {
    var chk = $(this).closest("tr").find("input:checkbox").get(0);
    if(e.target != chk)
    {
        chk.checked = !chk.checked;
    }
});

demo here