jQuery td onclick to set a checkbox, no bubbling

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

Answer 2

Use labels.

<label for='cheboxID'>LABEL</label>

---

Here is a js solution: http://jsfiddle.net/maniator/eWh5F/

$("td").click(function(e) {
    var checkbox = $(':checkbox', $(this).parent()).get(0);
    var checked = checkbox.checked;
    if (checked == false) checkbox.checked = true;
    else checkbox.checked = false;
});