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