HTML <input type="checkbox"> 複選框 Checkbox

在HTML網頁可使用輸入元素(Input element)的複選框<input type="checkbox">讓使用者可以進行多選。

Checkbox通常會有多個<input type="checkbox">讓使用者複選。每個選項有各自的name名稱與value值。當表單提交時送出勾選項目的value值。複選框的文字擺在<input type="checkbox">後面。

例如下面是由多個checkbox組成的多選，每個例如下面是由多個radio button組成的單選，每個有各自的name與value值。

<label>喜歡的顏色:</label>
<label><input type="checkbox" name="color1" value="blue">藍色</label>
<label><input type="checkbox" name="color2" value="yellow">黃色</label>
<label><input type="checkbox" name="color3" value="red">紅色</label>
<label><input type="checkbox" name="color4" value="green">綠色</label>

效果如下。

喜歡的顏色 藍色 黃色 紅色 綠色

如果要給定預設勾選的選項，在要預設勾選的<input type="checkbox">加上checked屬性。

<label>用過的程式語言:</label>
<label><input type="checkbox" name="lang-1" value="javascript" checked>JavaScript</label>
<label><input type="checkbox" name="lang-2" value="java" checked>Java</label>
<label><input type="checkbox" name="lang-3" value="c">C</label>
<label><input type="checkbox" name="lang-4" value="c-plus2">C++</label>
<label><input type="checkbox" name="lang-5" value="php">PHP</label>
<label><input type="checkbox" name="lang-6" value="python" checked>Python</label>

效果如下。可以看到有checked屬性的選項被預先勾選了。

用過的程式語言: JavaScript Java C C++ PHP Python

HTML的複選框<input type="checkbox">沒有如單選框<input type="radio">有必填required屬性，所以若一組複選框為必填ㄧ個，要另外寫程式來達成。

若本篇對您有幫助還幫忙點個廣告支持，感恩。

• Checkbox state (type="checkbox")
• HTML <input> 輸入元素 Input element 簡介