HTML 单选按钮正在选择多个按钮，尽管 'name' 属性具有相同的值

Question

我用谷歌搜索了这个，单选按钮应该有相同的 'name' 属性以允许只选择一个值。

所以我做到了，它仍然允许我选择多个值... 我为此使用了 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 %}

Answer 1

在上面的代码中，循环创建了多个表单。这就是为什么您能够 select 单选中的多个值的原因。

如果你能像这样修改你的代码，它就会工作

{% 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 %}

HTML 单选按钮正在选择多个按钮，尽管 'name' 属性具有相同的值

HTML radio button is selecting multiple buttons although 'name' attribute has the same value

html

jinja2

radio-button