时间戳

首页 > 解决方案 > 使每个输入的标签可点击

html - 使每个输入的标签可点击

问题描述

我有以下代码...

{%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 循环，对于每个可用选项，默认情况下单击标签都会选择第一个选项（单选框）。为什么会这样，我怎样才能克服它？

标签： htmlflaskjinja2

解决方案

您id一遍又一遍地重复使用相同的值。单击标签时应该激活哪一个？您的浏览器将选择此处属性中命名为 id的第一个for元素，如果您为所有input元素赋予相同的属性值id并且为所有元素赋予label相同的属性值，那么除了第一个被切换for之外，您别无所求。input

生成唯一的 id 值；您可以使用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>

推荐阅读