Check / uncheck the box without using JavaScript / jQuery

Question

Check / uncheck the box without using JavaScript / jQuery

Is it possible to toggle the state (check / uncheck) of a type input checkbox without using JavaScript / jQuery, i.e. only via HTML and CSS?

Let's say I want to toggle it by clicking on the label next to it.

If so, how can we achieve this?

+3

javascript html css

SKSpall Jul 29. 17 at 18:43

source to share

4 answers

See this answer to the question before updating it!

Only using a hardcoded attribute checked

:

<input type="checkbox" checked />

If you want to call it from code, it's not possible without JS / jQuery.

+1

Commercial Suicide Jul 29. 17 at 18:47

source to share

shortcut and input are for collaboration :)

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

A signature can be associated with a specific form control:

Usage for attribute [Example A]

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

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

Run code

+1

G-Cyr Jul 29. 17 at 18:50

source to share

Yes, you can. Use this code

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

+1

Vishnu r nair Jul 29. 17 at 19:19

source to share

Ori Drori · Accepted Answer · 2017-07-29T18:50:09+0000

If you need to check / uncheck an input <label>

, check the id

input and use the label for

attribute to connect them.

<input type="checkbox" id="chk" />

<label for="chk">Click to check/uncheck</label>

Run code

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

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

Run code

Check / uncheck the box without using JavaScript / jQuery

More articles: