jQuery td onclick to set a checkbox, no bubbling

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 wr开发者_开发百科apped 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.

---

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

---

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;
});

---

$("td").click(function(e) {

    var $checkbox = $("input[type='checkbox']");
       $checkbox.attr('checked', !$checkbox.attr('checked'));



});

http://jsfiddle.net/cJ2us/12/

---

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;
}

<table class="table">
<tr>
<td  onclick="aply(this)"><input type="checkbox" onclick="stopProp(event);"  />1</td>
</tr>
<tr>
<td  onclick="aply(this)"><input type="checkbox" onclick="stopProp(event);"  />2</td>
</tr>
</table>