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

user_11141671 · Answer

there is another way ,full javascript

 function aply(t){
   let chk = t.firstChild;
    chk.checked =!chk.checked;
 }
 function stopProp(e){
  e.stopPropagation();
 }

.table tr td{
height:50px;
width:100px;
background-color:gray;
}

jQuery td onclick to set a checkbox, no bubbling

4 Answers