?
This document uses PHP Chinese website manual Release
<input>類型的元素checkbox默認(rèn)呈現(xiàn)為方框，在激活時被檢查（打勾）。它們允許您選擇單個值來提交表單（或不選擇）。
<input id="checkBox" type="checkbox">
注：單選按鈕與復(fù)選框類似，但有一個重要的區(qū)別 - 單選按鈕用于選擇幾個值中的一個，而復(fù)選框允許您打開和關(guān)閉單個值。在存在多個控件的情況下，單選按鈕允許從其中選擇一個，而復(fù)選框允許選擇多個值。
值 | 代表復(fù)選框值的DOMString。 |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 檢查 |
IDL屬性 | 檢查和價值 |
方法 | 選擇（） |
Value
DOMString表示復(fù)選框的值。這在客戶端是不可見的，但是在服務(wù)器端，數(shù)據(jù)name用復(fù)選框提交其值。以下面的例子：
<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>
在這個例子中，我們有一個名字subscribe和一個值newsletter。當(dāng)表單提交時，數(shù)據(jù)名稱/值對將會是subscribe=newsletter。
如果該value屬性被省略，則提交的數(shù)據(jù)將被賦予默認(rèn)值on，所以在這種情況下提交的數(shù)據(jù)將是subscribe=on。
注意：如果在提交表單時未選中復(fù)選框,則不會向服務(wù)器提交任何值，以表示其未選中狀態(tài)(e.g. value=unchecked);;該值根本不會提交到服務(wù)器。
使用復(fù)選框輸入
我們已經(jīng)介紹了上面的復(fù)選框的最基本的用法?，F(xiàn)在我們來看看您需要的其他常見復(fù)選框相關(guān)的功能和技巧。
處理多個復(fù)選框
我們上面看到的例子只包含一個復(fù)選框，在許多實(shí)例中，您可能會遇到多個復(fù)選框。如果他們是完全不相關(guān)的，那么你可以像上面所顯示的那樣把它們分開處理。不過，如果他們都是相關(guān)的，事情就不那么簡單了。
例如，在下面的演示中，我們包含了多個復(fù)選框，以允許用戶選擇他們喜歡什么（請參閱示例部分中的完整版本）。
<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>
在這個例子中，你會看到我們已經(jīng)給每個復(fù)選框相同name。如果兩個復(fù)選框都被選中，然后表單被提交，你會得到一個像這樣提交的名稱/值對的字符串：interest=coding&interest=music。當(dāng)這些數(shù)據(jù)到達(dá)服務(wù)器端時，您應(yīng)該能夠?qū)⑵洳东@為相關(guān)值的數(shù)組，并進(jìn)行相應(yīng)處理 。
默認(rèn)選中復(fù)選框
要使復(fù)選框在默認(rèn)情況下被選中，只需將其賦予該checked屬性即可?？聪旅娴睦樱?/p>
<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>
為您的復(fù)選框提供更大的區(qū)域
在上面的例子中，您可能已經(jīng)注意到，您可以通過單擊其關(guān)聯(lián)<label>元素以及復(fù)選框本身來檢查復(fù)選框。這是HTML表單標(biāo)簽的一個非常有用的功能，可以更輕松地單擊您想要的選項，尤其是在手機(jī)等小屏幕設(shè)備上。
除了可訪問性，這是<label>在表單上正確設(shè)置元素的另一個很好的理由。
不確定狀態(tài)復(fù)選框
存在不確定狀態(tài)的復(fù)選框，其中不選中或未選中，但未確定。這是通過JavaScript 使用HTMLInputElement對象的indeterminate屬性來設(shè)置的（不能使用HTML屬性來設(shè)置）：
inputInstance.indeterminate = true;
處于不確定狀態(tài)的復(fù)選框在橫向上具有水平線，而不是在大多數(shù)瀏覽器中檢查/打勾。
這個屬性的用例并不多，但下面的例子顯示了一個。在這個例子中，我們跟蹤我們正在收集的食譜的成分。當(dāng)您選中或取消選中某個成分的復(fù)選框時，JavaScript函數(shù)會檢查所選成分的總數(shù)：
如果沒有選中，食譜的復(fù)選框設(shè)置為未選中。
如果選中了一個或兩個，則食譜名稱的復(fù)選框被設(shè)置為
indeterminate。
如果全部三個選中，食譜名稱的復(fù)選框設(shè)置為
checked。
所以在這種情況下，indeterminate狀態(tài)是用來說明收集成分已經(jīng)開始, 但配方還沒有完成。
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 = 1; for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) {
checkedCount++; } } if(checkedCount === ingredients.length + 1) {
overall.checked = true;
overall.indeterminate = false; } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {
overall.checked = false;
overall.indeterminate = true; } else {
overall.checked = false;
overall.indeterminate = false; } }注意：如果您提交一個帶有不確定復(fù)選框的表單，則會發(fā)生同樣的情況，就好像該表單未被選中一樣 - 沒有提交數(shù)據(jù)來表示復(fù)選框。
驗證
復(fù)選框支持驗證（提供給所有人<input>）。但是，大多數(shù)ValidityState將始終為假。
如果復(fù)選框有required屬性，但沒有選中，那么ValidityState.valueMissing 將會為true
示例
以下示例是我們上面看到的“多個復(fù)選框”示例的擴(kuò)展版本 - 它具有更多的標(biāo)準(zhǔn)選項，另外還有一個“其他”復(fù)選框，在選中時會導(dǎo)致文本字段顯示為進(jìn)入“其他”選項。這是通過一個簡單的JavaScript塊來實(shí)現(xiàn)的。該示例還包含一些CSS來改進(jìn)樣式。
<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;}#otherValue{
display: none;}#other:checked ~ #otherValue{
display: inline-block;}規(guī)范
規(guī)范 | 狀態(tài) | |
|---|---|---|
HTML生活標(biāo)準(zhǔn)該規(guī)范中'<input type =“復(fù)選框”>“的定義。 | 生活水平 | |
HTML5該規(guī)范中的'<input type =“復(fù)選框”>“的定義。 | 建議 |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |