| Creates a check box control. | HTML 2, 3.2, 4, 4.01, 5 |
HTML Syntax
<input type = checkbox
checked
id = control_id
name = control_name
value = control_value
>
NOTE: Only the <input> start tag must be present. The element has no end tag.
The <input type=checkbox> element renders a control box representing an option that the user can check or uncheck.
The appearance of the checkbox interface varies, depending on the browser and operating system. Typically, it is presented as a small square that may have rounded corners.
In most cases, checkboxes are used with other <input> elements defined within an HTML <form> element.
When checkbox controls are to be submitted in a form, the name and value attributes are required.
This is because the control’s name/value pair is needed in order to process the submitted data.
A single checkbox allows users to select a single value to be submitted for processing.
Multiple checkboxes allow one or more, or all values to be submitted for processing.
The assigned value can be any string that represents the subject or textual content of the checkbox.
The default value is the keyword on when no value is specified.
The control is selected or checked when a user clicks or taps the checkbox ( or its associated label when one is specified ), or when the control element’s checked attribute is set thru script.
When a form is submitted, only the name/value pairs of checked checkbox controls are sent with the form data set.
Several checkboxes in a form may share the same control name.
This way, the controls act as a group, or a collection that can accept multiple selections, where each selected checkbox generates a separate name/value pair in the submitted data.
As a collection, the checkbox controls can easily be queried in client-side script, simply by enumerating the members of the collection, which comprise the name/value pairs of the selected choices.
One really useful feature introduced in HTML4 is the <label> element, which serves to associate or connect form labels to form controls to make them more accessible and easier to activate, especially on small-screen mobile devices with touchscreen functionality only ( no stylus, pen or any pointing device ).
Notice in the above examples that you can toggle a checkbox by clicking ( or tapping ) on its associated <label> as well as on the checkbox itself.
Without an associated <label> element, the user has to click ( or tap ) only on the checkbox itself to select ( or deselect ) an option.
Notice also the cursor change when hovering over a <label> that is ( or is not ) connected to a control.
When checkbox controls ( or any input control ) are to be associated with a <label> element, the control’s id attribute is required, as this is what the for attribute of the <label> uses to connect to the control.
<label for=control_id>control_label</label>
The <input_checkbox> element supports the following attributes, in addition to global attributes and attributes common to all HTML input elements.
The following example shows the simplest way to test the checked state of a single checkbox in client-side script, and trigger an action if the test returns true.
chkBox = document.getElementById ( "chkBox" );
if ( chkBox.checked ) msg.innerHTML = msgText;
else msg.innerHTML = "";
In this case, the action is simply to display a message if checked is true, and discard the message otherwise.
Show me
The following example shows how to retrieve selected values of multiple checkboxes in client-side script, and enumerate the values in a message.
function getChoices ( ) {
msg.innerHTML = "";
form = document.querySelector ( "#theForm" );
selected = Array.from ( form.querySelectorAll (
'input[type="checkbox"]:checked' ) );
if ( selected.length > 0 ) {
msg.innerHTML = "Selected items:<br>"
// enumerate selected values
for ( var i = 0; i < selected.length; i ++ ) {
msg.innerHTML += selected [ i ].value + "<br>";
}
}
else msg.innerHTML = "Nothing selected."
}
Recall that when a form is submitted, only the name/value pairs of checked checkbox controls are sent with the form data set.
Show me
The following example is a variation of the above, and shows how client-side script may be used to detect and process which checkboxes are selected.
Show me
INPUT INPUT type=radio OPTION SELECT