尽管“名称”属性具有相同的值，但 HTML 单选按钮正在选择多个按钮答案

【问题标题】：HTML radio button is selecting multiple buttons although 'name' attribute has the same value尽管“名称”属性具有相同的值，但 HTML 单选按钮正在选择多个按钮
【发布时间】：2023-03-16 03:32:01
【问题描述】：

我搜索了这个，单选按钮应该具有相同的“名称”属性，只允许选择一个值。

所以我做到了，它仍然允许我选择多个值... 我为此使用了 HTML 和 Jinja2 模板，所以代码可能看起来有点奇怪..

   {% if search_keyword == None: %}
        <p>Please enter your search keyword</p>
    {% else: %}
        {% for i in range(0, 10) %}
        <form method="POST" action="./search">
          <h2>
              <input type="radio" name="selected_food" id="{{ i }}" value="{{ search_data["hits"][i]['recipe']['label'] }}">
              {{ search_data["hits"][i]['recipe']['label'] }}
          </h2>
          <h4>
              Calroies: {{ '%0.2f'| format(search_data["hits"][i]['recipe']['calories']) }} kcal
          </h4>
              {% for j in range(0, 40) %}
                <p>{{ search_data['hits'][i]['recipe']['ingredientLines'][j] }}</p>
              {% endfor %}
        </form>
        {% endfor %}
    {% endif %}

【问题讨论】：

上述代码中只有一个收音机。其他人在哪里？
在浏览器中生成的实际 html 源代码是什么？请同时发布。
@Dalvik 啊抱歉！它在 for 循环中。我为此使用了 Jinja 模板。我刚刚更新了代码..！
@RaviKThapliyal 对此感到抱歉..！刚刚更新了代码..！

标签： html radio-button jinja2

【解决方案1】：

在上面的代码中，循环创建了多个表单。这就是您可以在单选中选择多个值的原因。

如果你可以像这样修改你的代码，它会起作用

{% if search_keyword == None: %}
        <p>Please enter your search keyword</p>
    {% else: %}
        <form method="POST" action="./search">
             {% for i in range(0, 10) %}
                <div>
                   <h2>
                       <input type="radio" name="selected_food" id="{{ i }}" value="{{ search_data["hits"][i]['recipe']['label'] }}">
                     {{ search_data["hits"][i]['recipe']['label'] }}
                   </h2>
                   <h4>
              Calroies: {{ '%0.2f'| format(search_data["hits"][i]['recipe']['calories']) }} kcal
                   </h4>
              {% for j in range(0, 40) %}
                <p>{{ search_data['hits'][i]['recipe']['ingredientLines'][j] }}</p>
              {% endfor %}

           </div>
            {% endfor %}
        </form>
     
    {% endif %}

【讨论】：