The checkbox Type

Live Demo

Firefox	Safari	Safari	Chrome	Opera	IE	Android

The Low Down

The checkbox input type is used to create a toggleable check box.

• While optional, you need to include the name and value attributes to define the name/value content that will be submitted, if the checkbox is checked, when the form is submitted.
• Clicking on a checkbox will toggle the state from checked to unchecked and back again.
• While you should include a <label> for every form control, it is especially important to associate one with each checkbox input type: clicking the contents of the associated label toggles the state of the checkbox from on to off to on.
• Use the checked attribute to default select the item. Without this attribute, the default state for a checkbox is not checked.
• The indeterminate IDL attribute puts the checkbox into an indeterminate state, neither checked nor unchecked, like what you may want to do with a “check all” at the top of a group of checkboxes where at least one, but not all, are checked. On most platforms, this draws a horizontal line across the checkbox. In IE, it’s a small square inside the bigger checkbox.
• This  indeterminate attribute is not an HTML attribute. To put a checkbox into the indeterminate state, use JavaScript

document.getElementById(indtrmnt).indeterminate = true;

• You can target checkboxes and associated elements with :checked, :indeterminate and :not(:checked). For example, you can target the label that comes after a checked checkbox with:

input[type=checkbox]:checked + label {}

• Some designers want you to create their own look and feel for checkboxes. Don’t try to style the browsers default checkboxes and don’t try to use generated content on this replaced elements. Instead, visually hide the checkbox, and use a background image on the label.
• In Firefox, you can target checkboxes that were checked by default with :default.