How to create and use a HTML checkbox ?

Default

The default value is on and never changes.

Demo:

• The HTML

<input type="checkbox"  name="indicator"/>

• The javascript with an click event listener

document.querySelector("input").addEventListener("click", function(){
   console.log(`The checkbox is checked ? ${this.checked}`);
   console.log(`The value is ${this.value}`);
});

• Checking or unchecking the checkbox does not change the value

If Set

If the value attribute is set, this value will be send instead

Demo:

• The HTML with a checkbox with a mandatory name and a custom value

<form>
    <input type="checkbox" name="indicator" value="customValue" />
    <button type="submit">Submit</button>
</form>

• This javascript:
  • will intercept the submit event,
  • create a formdata to capture the fields send.
  • and logs the entries.

document.querySelector("form").addEventListener("submit", function(event){
   event.preventDefault();
   let formData =  new FormData(this);
   let i = 0;
   for (let entry of formData) {
      i++;
      console.log(`Entry ${i}`);
      console.log(entry);
   }
   console.log(`Number of field sent: ${i}`);
});

• The result:
  • Uncheck and submit
  • Check and submit

Css

• To style the below checkbox:

<input type="checkbox"  name="indicator" checked/>

• first disable the browser rendering

input[type="checkbox"] {
  appearance: none;
}

• Then make you own.
• Styling for Checked or unchecked checkbox

input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.25);
  background-color: #20c997;
  border-color: #20c997;
}

• Styling when checked, with the checked pseudo class

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3e%3c/svg%3e");
}

• Output:

Switch

As switch ¹⁾

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

Button

With button ²⁾

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

How to change the state programmatically

The checked attribute of the input checkbox element permits:

• to test the state (if true, the checkbox is checked)
• to set the state

Example

• the callback function that:
  • toggle the checkmark
  • prevent the default submit action (ie go away)

function toggleCheckBox(event){
  event.preventDefault();
  if (event.target.checkbox.checked){
     event.target.checkbox.checked = false;
     event.target.button.innerHTML= "Check the checkbox";
  } else {
    event.target.checkbox.checked = true;
    event.target.button.innerHTML= "Uncheck the checkbox";
  }
}

• A form that register the callback function via a event handler for the submit event

<form onSubmit="toggleCheckBox(event)">
<input type="checkbox" name="checkbox" checked="true" /></br>
<button type="submit" name="button">Uncheck the checkbox</button>
</form>

• Result:

How to use a checkbox to enable or disable other Form elements

Example of a legend with a checkbox that controls whether or not the fieldset is enabled

<form>
<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>
</form>

• Just click the checkbox to see it in action.