具有相同名稱的複選框的標籤

Question

我正在編寫一個小型應用程序，用戶可以通過從複選框列表中進行選擇來在地圖上定義彈出窗口。每個複選框都對應一個特定的數據值，並且該列表是動態生成的。

至於我，我依次通過它獲取的數據，並建立在以下格式的列表：

<label> 
    <input type='checkbox' name='enabled_data', value='DATA VALUE' /> 
    DATA VALUE 
</label> 

當表單提交，我得到enabled_data項目，我可以再一起工作的數組。

但是，只要我嘗試爲標籤添加值，標籤就會停止工作 - 可能是因爲每個複選框共享相同的名稱。

<label for='enabled_data'> 

我想我會用幾十每張地圖這些複選框的結束，和我想知道如果做到這一點的唯一方法是產生某種獨特的ID爲每個複選框（如地圖名稱+ data_value）讓標籤正常工作？

Answer 1

您應該爲for屬性值提供一個ID。

for = string： 指定用於指示與標題相關聯的表格控件。 屬性的值必須是與label元素相同的Document中的可鏈接表單關聯元素的ID。

見doc

它停止工作，因爲有id爲enabled_data沒有元素。爲您的inputs指定一個ID並將其作爲各個標籤的for屬性值。

<label for="check1">DATA VALUE</label> 
<input type='checkbox' name='enabled_data' value='DATA VALUE' id="check1" /> 

此外，您還有2個屬性之間的逗號。

<input type='checkbox' name='enabled_data', value='DATA VALUE' /> 
              ^___________________ 

Answer 2

您看到的for指向Element ID，而不是名稱。

<label for="element_id"> 

看看這裏W3C。