如何建立帶有可點擊標籤的複選框？

如何建立帶有可單擊標籤的HTML複選框（這意味着單擊標籤能夠打開/關閉該複選框）？

---

#1樓

它也能夠工做：

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

---

#2樓

您還可使用CSS僞元素分別從複選框的全部value屬性中選擇並顯示標籤。
編輯：這僅適用於基於Webkit和基於眨眼的瀏覽器（Chrome（ium），Safari，Opera ....）以及大多數移動瀏覽器。 這裏沒有Firefox或IE支持。
僅在將webkit / blink嵌入到您的應用程序中時，這纔有用。

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

全部僞元素標籤將是可單擊的。

演示： http : //codepen.io/mrmoje/pen/oteLl，+ 要點

---

#3樓

用這個

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});

---

#4樓

只需確保標籤與輸入關聯便可。

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

---

#5樓

方法1：包裝標籤標籤

將複選框包裝在label標籤內：

<label><input type="checkbox" name="checkbox" value="value">Text</label>

方法2：使用for屬性

使用for屬性（與複選框id匹配）：

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

注意 ：ID在頁面上必須是惟一的！

說明

因爲其餘答案均未說起，所以標籤最多能夠包含1個輸入，並省略for屬性，而且將假定它用於其中的輸入。

w3.org的摘錄（重點介紹）：

[for屬性]將要定義的標籤與另外一個控件明確關聯。 若是存在，則此屬性的值必須與同一文檔中某些其餘控件的id屬性的值相同。 若是不存在，則定義的標籤與元素的內容相關聯。

要將標籤與另外一個控件隱式關聯， control元素必須在LABEL元素的內容以內 。 在這種狀況下，LABEL只能包含一個控制元素。 標籤自己能夠位於相關控件以前或以後。

使用這種方法比有必定的優點for ：

• 無需爲每一個複選框分配一個id （太好了！）。

• 無需使用<label>的extra屬性。

• 輸入的可單擊區域也是標籤的可單擊區域，所以沒有兩個單獨的可控制複選框的單擊位置-不管<input>和實際標籤文本有多遠，不管是哪一種類型，都只能單擊一個位置。應用於它的CSS。

帶有一些CSS的演示：

label { border:1px solid #ccc; padding:10px; margin:0 0 10px; display:block; } label:hover { background:#eee; cursor:pointer; }

<label><input type="checkbox" />Option 1</label> <label><input type="checkbox" />Option 2</label> <label><input type="checkbox" />Option 3</label>