label not working with checkbox

Question

OK, what am I missing? I have:

<form>     <input type="checkbox" name="showRatings" value="1" checked>     <label for="showRatings">Show Ratings</label> </form> 

And when I click on the "Show Ratings" text, the checkbox is not toggling. I know it's something simple.

Answer 1

I believe the label element links to the id attribute, not the name attribute. Try this:

<form>   <input type="checkbox" name="showRatings" id="showRatings" value="1" checked>   <label for="showRatings">Show Ratings</label> </form> 

Reference here.

Answer 2

When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.

<label>     Foo     <input name="foo" type="checkbox" /> </label> 

Clicking on "Foo" will trigger a toggle of the checkbox