How to prevent a link inside a label from triggering a checkbox?

Question

I have this label:

 I agree to the terms and would like to continue

        

Answer 1

Interactive elements inside interactive elements cause functional problems like this: it is undefined what happens when you click an a element inside a label element or vice versa. To avoid this, take the a element out of the label element, e.g.

<label><input type="checkbox">I agree</label> to the <a href="terms">terms</a>
and would like to continue

or

<input type="checkbox" id="agree"><label for="agree">I agree</label> to the
<a href="terms">terms</a> and would like to continue

Answer 2

Stop propagation of the click event on the link. This prevents the click event from bubbling up to the label.

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation