Сделать ярлык кликабельным для каждого ввода

Question

У меня есть следующий код ...

{%for row in odata%}
    <div class="options">
      <label for="option-text">{{row}}</label>
      <input type="radio" id="option-text" name="option-text">
    </div>
{%endfor%}

Но по какой-то причине даже с циклом for для каждой доступной опции при щелчке метки по умолчанию выбирается первая опция (переключатель).Почему это так и как мне пройти через это?

Answer 1

Вы повторно используете одно и то же значение id, снова и снова.Какой из них должен быть активирован при нажатии на ярлык?Ваш браузер выберет первый элемент с идентификатором, указанным здесь в атрибуте for, и если вы предоставите всем input элементам одинаковые id и всем label элементам одинаковые forзначение атрибута, тогда вы не сможете ожидать ничего, кроме первого input, который будет переключаться.

Генерация уникальных значений идентификаторов;Вы можете использовать специальные переменные цикла for , такие как loop.index0, чтобы добавить число к каждому id:

{%for row in odata%}
    <div class="options">
      <label for="option-text-{{loop.index0}}">{{row}}</label>
      <input type="radio" id="option-text-{{loop.index0}}" name="option-text">
    </div>
{%endfor%}

Обратите внимание, что атрибут name остается прежним!Это намеренно.Однако вы можете присвоить этим input элементам атрибут value, чтобы браузер отправлял их обратно на сервер при отправке.

Другой вариант - вообще отказаться от for и вложить <input> внутри тег <label>..</label>:

{%for row in odata%}
    <div class="options">
      <label>
        {{row}} <input type="radio" name="option-text">
      </label>
    </div>
{%endfor%}

Подробнее см. Документацию MDN по <label>.