It’s quite common to see list items <li> or table rows <tr><td> which contain a checkbox <input type=”checkbox”/>. Rather than the user having to be very precise and click/touch on the checkbox, it’s often preferable, especially on mobile devices, to be able to click/touch anywhere in the item or row.
This sounds simple but throws up a problem. If we have click events on the item/row and the checkbox then a click on the checkbox fires both events, checking and then unchecking the checkbox. Setting e.stopPropagation on the checkbox click event doesn’t seem to work.
There are 2 solutions. The first is arguably simpler and more semantic. Simply wrap the checkbox in a <label> tag and then change the label’s CSS so that it fills the list item or row.
See the Pen Checking Checkboxes by Clicking Parent List Item by Chris Smith (@chris22smith) on CodePen
The e.target refers to the element that was clicked. If, within the list item click, the checkbox is not clicked then change the checked state.