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值。单击标签时应激活哪一个？您的浏览器将在这里选择{em> first 元素，其ID在for属性中命名，如果您为所有input元素赋予相同的id和所有{{ 1}}元素具有相同的label属性值，那么除了第一个for之外，您别无选择。

生成唯一的ID值；您可以使用input之类的for loop special variables向每个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>

有关更多详细信息，请参见MDN documentation on <label>。

Answer 2

您必须为每个标签和输入添加唯一的ID。

使标签对于每个输入都可单击

2 个答案: