html選擇 - 核取方塊




如何使用可點擊標籤創建HTML複選框 (7)

方法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屬性的值相同。 缺席時,被定義的標籤與元素的內容相關聯。

要隱式地將標籤與另一個控件相關聯, 控件元素必須位於LABEL元素的內容中 。 在這種情況下,LABEL可能只包含一個控制元素。 標籤本身可以位於關聯控件之前或之後。

使用這種方法有以下優點:

  • 無需為每個複選框分配一個id (太棒了!)。

  • 不需要使用<label>的額外屬性。

  • 輸入的可點擊區域也是標籤的可點擊區域,所以沒有兩個獨立的點擊位置可以控制複選框 - 只有一個,無論“ <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>

如何創建一個可點擊標籤的HTML複選框(這意味著點擊標籤打開/關閉複選框)?


使用label元素和for屬性將其與復選框相關聯:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />


它也起作用:

<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>

您也可以使用CSS偽元素從各個複選框的值屬性中分別挑选和顯示標籤。
編輯:這將只適用於基於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 ://codepen.io/mrmoje/pen/oteLl,+它的要點


這應該對你有幫助: W3Schools - Labels

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

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />




label