files/zh-cn/web/html/element/input/checkbox/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

---
title: <input type="checkbox">
slug: Web/HTML/Element/Input/checkbox
translation_of: Web/HTML/Element/input/checkbox
---
<p><span class="seoSummary">HTML input元素 <strong><code>&lt;input type="checkbox"&gt;</code></strong> 允许你为表单中（或不在表单中）的提交项选择一个单一值。</span></p>

<div class="note">
<p><strong>注意</strong>： 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。</p>
</div>

<h2 id="属性">属性</h2>

<p>该元素包含<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("checked")}}</dt>
 <dd>
 <p>当<strong>type</strong>属性的值为<code>checkbox时</code>, 这个属性的存在表示input是否默认被选中。你可以将该属性设置为<code>checked="checked"，</code>或更简单地只设置为<code>checked。</code></p>
 </dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>指定input的值。如果省略，获取该元素的值的结果为字符串"on"。<br>
 请注意，如果value值发生改变后页面重新加载，Gecko和IE<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">会忽略HTML源代码中设置的value值</a>。</dd>
 <dt>{{htmlattrdef("indeterminate")}}</dt>
 <dd>指定checkbox处于不定状态（在大多数平台，这样会产生一个划过checkbox的横线）。</dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;p&gt;
  &lt;input type="checkbox" id="cbox1" value="first_checkbox"&gt;
  &lt;label for="cbox1"&gt;This is the first checkbox&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input type="checkbox" id="cbox2" value="second_checkbox" checked="checked"&gt;
  &lt;label for="cbox2"&gt;This is the second checkbox, which is checked&lt;/label&gt;
&lt;/p&gt;
</pre>

<p>以上代码将产生2个checkbox，如下所示：</p>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>规范</td>
   <td>状态</td>
  </tr>
  <tr>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;checkbox&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;checkbox&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#checkbox', '&lt;checkbox&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
   <td>2 or earlier</td>
   <td>1.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>type=checkbox</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br>
    {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td>
   <td>2</td>
   <td>1.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>type=checkbox</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>