2013-07-11 6 views
1

Я пишу небольшое приложение, в котором пользователи могут определять всплывающие окна на карте, выбирая из списка флажков. Каждый флажок соответствует определенному значению данных, и список генерируется динамически.ярлыки для одноименных флажков

Как я получаю данные, я цикл через него и построить список в следующем формате:

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

Когда форма отправлена, я получаю массив enabled_data пунктов, которые я могу затем работать с ,

Однако, как только я пытаюсь привязать значение к меткам, метки перестают работать - вероятно, потому, что каждый флажок имеет одно имя.

<label for='enabled_data'> 

Я полагаю, я в конечном итоге с десятками этих флажков на карте, и мне интересно, если единственный способ сделать это, чтобы произвести какой-то уникальный идентификатор для каждого чекбокса (например, название карты + data_value) чтобы ярлыки правильно работали?

+0

Зачем вам нужен атрибут for, если вы обертываете ярлык? –

ответ

3

Вы должны указать идентификатор для значения атрибута for.

for = string: Указывается элемент управления формой, с которым должна быть связана подпись. Значение атрибута должно быть идентификатором связанного с меткой элемента, связанного с формой, в том же документе, что и элемент метки.

См doc

он перестал работать, потому что нет ни одного элемента с идентификатором enabled_data. укажите идентификатор для вашего inputs и укажите это как значение атрибута for для вашей соответствующей метки.

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

Также у вас есть запятая между двумя атрибутами.

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

Ах, извините за запятую - я писал все в Jade, и синтаксис запятой специфичен для него. –

+0

@sir_kitty ah ok .. – PSL

1

The for, который вы видите точки к элементу ID, а не имя.

<label for="element_id"> 

Посмотрите здесь, W3C.

Смежные вопросы