<input>
elements of type
checkbox
are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).
注意 : Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
| 值 |
A
DOMString
representing the value of the checkbox.
|
| 事件 |
change
and
input
|
| Supported common attributes |
checked
|
| IDL attributes |
checked
,
indeterminate
and
value
|
| 方法 |
select()
|
A
DOMString
representing the value of the checkbox. This is never seen on the client-side, but on the server this is the
value
given to the data submitted with the checkbox's
名称
. Take the following example:
<form>
<div>
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
</div>
<div>
<button type="submit">Subscribe</button>
</div>
</form>
In this example, we've got a name of
subscribe
, and a value of
newsletter
. When the form is submitted, the data name/value pair will be
subscribe=newsletter
.
若
value
attribute was omitted, the default value for the checkbox is
on
, so the submitted data in that case would be
subscribe=on
.
注意
: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g.
value=unchecked
); the value is not submitted to the server at all. If you wanted to submit a default value for the checkbox when it is unchecked, you could include an
<input type="hidden">
inside the form with the same
名称
and
value
, generated by JavaScript perhaps.
In addition to the common attributes shared by all
<input>
elements, "
checkbox
" inputs support the following attributes:
| 属性 | 描述 |
|---|---|
checked
|
Boolean; if present, the checkbox is toggled on by default |
indeterminate
|
A Boolean which, if present, indicates that the value of the checkbox is indeterminate rather than
true
or
false
|
value
|
The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on |
checked
A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does
not
indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the
HTMLInputElement
’s
checked
IDL attribute is updated.)
注意：
Unlike other input controls, a checkboxes value is only included in the submitted data if the checkbox is currently
checked
. If it is, then the value of the checkbox's
value
attribute is reported as the input's value.
Unlike other browsers, Firefox by default
persists the dynamic checked state
of an
<input>
across page loads. Use the
autocomplete
attribute to control this feature.
indeterminate
若
indeterminate
attribute is present on the
<input>
element defining a checkbox, the checkbox's value is neither
true
nor
false
, but is instead
indeterminate
, meaning that it's state cannot be determined or stated in pure binary terms. This may happen, for instance, if the state of the checkbox depends on multiple other checkboxes, and those checkboxes have different values.
Essentially, then, the
indeterminate
attribute adds a third possible state to the checkbox: "I don't know." In this state, the browser may draw the checkbox in grey or with a different mark inside the checkbox. For instance, browsers on macOS may draw the checkbox with a hyphen "-" inside to indicate an unexpected state.
value
value
attribute is one which all
<input>
s share; however, it serves a special purpose for inputs of type
checkbox
: when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the
value
attribute. If the
value
is not otherwise specified, it is the string
on
by default. This is demonstrated in the section
值
above.
We already covered the most basic use of checkboxes above. Let's now look at the other common checkbox-related features and techniques you'll need.
The example we saw above only contained one checkbox; in real-world situations you'll be likely to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separately, as shown above. However, if they're all related, things are not quite so simple.
For example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the 范例 section).
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">Coding</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Music</label>
</div>
</fieldset>
In this example you will see that we've given each checkbox the same
名称
. If both checkboxes are checked and then the form is submitted, you'll get a string of name/value pairs submitted like this:
interest=coding&interest=music
. When this string reaches the server, you need to parse it other than as an associative array, so all values, not only the last value, of
interest
are captured. For one technique used with PHP, see
Handle Multiple Checkboxes with a Single Serverside Variable
，例如。
To make a checkbox checked by default, you simply give it the
checked
attribute. See the below example:
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding" checked>
<label for="coding">Coding</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Music</label>
</div>
</fieldset>
In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated
<label>
element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones.
Beyond accessibility, this is another good reason to properly set up
<label>
elements on your forms.
In addition to the checked and unchecked states, there is a third state a checkbox can be in:
indeterminate
. This is a state in which it's impossible to say whether the item is toggled on or off. This is set using the
HTMLInputElement
对象的
indeterminate
property via JavaScript (it cannot be set using an HTML attribute):
inputInstance.indeterminate = true;
A checkbox in the indeterminate state has a horizontal line in the box (it looks somewhat like a hyphen or minus sign) instead of a check/tick in most browsers.
There are not many use cases for this property. The most common is when a checkbox is available that "owns" a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.
This can be seen in the below example (thanks to CSS Tricks for the inspiration). In this example we keep track of the ingredients we are collecting for a recipe. When you check or uncheck an ingredient's checkbox, a JavaScript function checks the total number of checked ingredients:
indeterminate
.
checked
.
So in this case the
indeterminate
state is used to state that collecting the ingredients has started, but the recipe is not yet complete.
var overall = document.querySelector('input[id="EnchTbl"]');
var ingredients = document.querySelectorAll('ul input');
overall.addEventListener('click', function(e) {
e.preventDefault();
});
for(var i = 0; i < ingredients.length; i++) {
ingredients[i].addEventListener('click', updateDisplay);
}
function updateDisplay() {
var checkedCount = 0;
for(var i = 0; i < ingredients.length; i++) {
if(ingredients[i].checked) {
checkedCount++;
}
}
if(checkedCount === 0) {
overall.checked = false;
overall.indeterminate = false;
} else if(checkedCount === ingredients.length) {
overall.checked = true;
overall.indeterminate = false;
} else {
overall.checked = false;
overall.indeterminate = true;
}
}
注意 : If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.
Checkboxes do support
validation
(offered to all
<input>
s). However, most of the
ValidityState
s will always be
false
. If the checkbox has the
required
attribute, but is not checked, then
ValidityState.valueMissing
将是
true
.
The following example is an extended version of the "multiple checkboxes" example we saw above — it has more standard options, plus an "other" checkbox that when checked causes a text field to appear to enter a value for the "other" option. This is achieved with a simple block of JavaScript. The example also includes some CSS to improve the styling.
<form>
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">Coding</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Music</label>
</div>
<div>
<input type="checkbox" id="art" name="interest" value="art">
<label for="art">Art</label>
</div>
<div>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="sports">Sports</label>
</div>
<div>
<input type="checkbox" id="cooking" name="interest" value="cooking">
<label for="cooking">Cooking</label>
</div>
<div>
<input type="checkbox" id="other" name="interest" value="other">
<label for="other">Other</label>
<input type="text" id="otherValue" name="other">
</div>
<div>
<button type="submit">Submit form</button>
</div>
</fieldset>
</form>
html {
font-family: sans-serif;
}
form {
width: 600px;
margin: 0 auto;
}
div {
margin-bottom: 10px;
}
fieldset {
background: cyan;
border: 5px solid blue;
}
legend {
padding: 10px;
background: blue;
color: cyan;
}
var otherCheckbox = document.querySelector('input[value="other"]');
var otherText = document.querySelector('input[id="otherValue"]');
otherText.style.visibility = 'hidden';
otherCheckbox.addEventListener('change', () => {
if(otherCheckbox.checked) {
otherText.style.visibility = 'visible';
otherText.value = '';
} else {
otherText.style.visibility = 'hidden';
}
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<input type="checkbox">' in that specification. |
实时标准 | |
|
HTML5
The definition of '<input type="checkbox">' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
type="checkbox"
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
<input>
和
HTMLInputElement
interface which implements it.
:checked
and
:indeterminate
CSS selectors let you style checkboxes based on their current state
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
<input>
类型
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">