Check/uncheck checkbox without using JavaScript/jQuery

Question

Is it possible to toggle the state (check/uncheck) of an input type checkbox without using JavaScript/jQuery i.e. 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?

I don't think it is possible. Under what circumstances would you like this toggle to happen? — Jarek Kulikowski
– Jarek Kulikowski, Commented Jul 29, 2017 at 18:45
with plain html you only need to click it to toggle checked and unchecked state, you do not need javascript for this !. Can you clarify your question cause css is only about styling. — G-Cyrillus
– G-Cyrillus, Commented Jul 29, 2017 at 18:46
Functional behaviour like this should be controlled by JavaScript. CSS should be used for presentation rather than controlling functionality. Hacks might exist with CSS but it would go against web semantics which really isn't recommended. — andrewhiles
– andrewhiles, Commented Jul 29, 2017 at 18:50
@andrewhiles: Yes surely, but I just wanted to know the workarounds/hacks. — SKSpall
– SKSpall, Commented Jul 29, 2017 at 19:00

Ori Drori · Accepted Answer · 2017-07-29 18:59:02Z

8

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>

edited Jul 29, 2017 at 18:59

answered Jul 29, 2017 at 18:50

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SKSpall Over a year ago

Yep, @GCyrillus has specified the second option.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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"/>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 29, 2017 at 18:50

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

1 Comment

SKSpall Over a year ago

Thanks for the documentation links! :)

P.S. · Accepted Answer · 2017-07-29 18:55:46Z

1

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.

edited Jul 29, 2017 at 18:55

answered Jul 29, 2017 at 18:47

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

3 Comments

G-Cyrillus Over a year ago

could be a good guess about what the OP really try to ask for ;)

P.S. Over a year ago

@GCyrillus, i have answered the question before it was updated. When i answered, the question didn't contain the row "Say I want to toggle it on click on a label next to it". After the question update, Ori Drori already gave a good answer

SKSpall Over a year ago

@CommercialSuicide: Thanks for the initial question's answer :)

Vishnu R Nair · Accepted Answer · 2017-07-29 19:19:11Z

1

YES , You Can. Use this code

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

answered Jul 29, 2017 at 19:19

Vishnu R Nair

364 bronze badges

Collectives™ on Stack Overflow

Check/uncheck checkbox without using JavaScript/jQuery

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Related