<a> tag inside <label> tag not triggering checkbox

Question

I have to use <a> inside a <label> tag. Because there are many css styles only apply to <a> in our current system. The <a> tag is not linking to any pages but for styling/hovering.

See code below:

<input type="checkbox" id="my-id">
<label for="my-id"><a href="javascript:void(0)">Some text</a></label>

But when clicking on "Some text", it doesn't toggle the checkbox status.

I've tried $.preventDefault()on the <a> tag but doesn't work.

What should i do to make the <a> behaves like a label?

Answer 1

If you remove the href attribute from the a element, clicking on the text will toggle the checkbox.

<input type="checkbox" id="my-id">
<label for="my-id"><a>Some text</a></label>

As the HTML spec states:

The href attribute on a and area elements is not required