HTML - CheckBox

1 - About

Checkbox is an type of input element.

3 - Basic Example

input/checkbox


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

4 - Keyboard Navigation

You navigate by default with the tab key between checkBox. HTML - tabindex attribute

Example:

  • if you click on the first check below
  • the first tab will get you on the last one because of the tabindex of value 2
  • the second tab will get you on the second checkbox because of the tabindex of value 0
  • the third tab will get you on the next interactive element in the iframe (ie a link) - the code is rendered in a iframe

<input type="checkbox"  tabindex="1" />
<input type="checkbox" tabindex="0" />
<input type="checkbox" tabindex="2" />

5 - Programmatic Modification

The checked attribute of the input checkbox element permits:

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

Example


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";
  } 
}


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

  • Result:

6 - Example

6.1 - Checkbox as Control

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.

6.2 - Bootstrap

Panel with list group in v4 was replaced by Card

<div class="card" style="width: 18rem;">

    <div class="card-header">
        <label><input type="checkbox" unchecked> Checkbox 1 </label>
    </div>

    <!-- List group -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item"><label><input type="checkbox" value="option2"> Option two </label></li>
        <li class="list-group-item"><label><input type="checkbox" value="option2"> Option two </label></li>
    </ul>
    
</div>

7 - Aria Role

7.1 - Example 1

Aria


<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
<label for="chk1">Remember my preferences</label>

7.2 - Example 2

From Checkbox Example (Two State):

The code:

  • The Css

[role='checkbox'][aria-checked='false']:before{
   content: url('https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/images/checkbox-unchecked.png');
}

[role='checkbox'][aria-checked='true']:before{
   content: url('https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/images/checkbox-checked.png');
}

[role='checkbox'].focus {
   border-color: black;
   background-color: #EEEEEE;
}

  • The Javascript:

window.onload=function() { 
    var checkboxes = document.querySelectorAll('[role="checkbox"]'); 
    for (var i = 0; i < checkboxes.length; i++) { 
         var cb = new Checkbox(checkboxes[i]); cb.init(); 
    } 
}

  • The HTML

<div id="ex1">
  <h3>
    Sandwich Condiments
  </h3>
  <div>
    <div role="checkbox"
       aria-checked="false"
       tabindex="0">
      Lettuce
    </div>
    <div role="checkbox"
       aria-checked="true"
       tabindex="0">
      Tomato
    </div>
    <div role="checkbox"
       aria-checked="false"
       tabindex="0">
      Mustard
    </div>
    <div role="checkbox"
       aria-checked="false"
       tabindex="0">
      Sprouts
    </div>
  </div>
</div>

<!-- With the libray call at the end -->
<!-- Checkbox widget that implements ARIA Authoring Practices for a menu of links -->
<script src="https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/js/checkbox.js" type="application/javascript"></script>

8 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap