label not working with checkbox

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.

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

Related