Edit in JSFiddle

document.querySelector("#foo").addEventListener('click', function() {
  	try{this.childNodes[1].click();} catch(e) { }
});

document.querySelector("#bar").addEventListener('click', function() {
  	event.stopPropagation();
});

<table>
<tr>
  <td id='foo'>
    <input id='bar' type="checkbox" value="y">
  </td>
</tr>
</table>

body {
  background-color : #20262E;
}

table {
  border : 1px solid white;
}

td {
  padding : 1rem;
}