选中/取消选中复选框，而不使用JavaScript / jQuery

Question

Is it possible to toggle the state (check/uncheck) of an input type checkbox without using JavaScript/jQuery ie only through HTML and CSS?

Say I want to toggle it on click on a label next to it.

If yes, how can we achieve that?

Answer 1

If you need to check/uncheck the input from a <label> , set an id on the input, and use the label's for attribute to connect them.

 <input type="checkbox" id="chk" /> <label for="chk">Click to check/uncheck</label> 

Another option is to use the label as a container to the input:

 <label><input type="checkbox" /> Click to check/uncheck</label> 

Answer 2

This answer is for the question before it was updated!

Only using a hardcoded attribute checked :

<input type="checkbox" checked />

If you want to trigger it from code, it's impossible without JS/jQuery.

Answer 3

label and input are meant to work together :)

see : https://www.w3.org/wiki/HTML/Elements/label

The caption can be associated with a specific form control:

• Using for attribute [Example A]

• By putting the form control inside the label element itself. [Example B]

 <label for="a">toggle state</label><input type="checkbox" id="a"/> 

Answer 4

YES , You Can. Use this code

<label for="MyCheckBox">Click Me !</label>
<input type="checkbox" id="MyCheckBox" />