html - 单选按钮错误，允许多项选择

Question

我正在使用 bootstrap 4 构建表单; 我必须使用单选按钮来询问一种语言的知识水平，我有一个 div对于每种语言 6 inline radio button内部(每个级别一个)。 问题是所有框都可以同时选中。

我正在生成 HTML通过 JS函数(由 JSweet 转译)，但我认为这与问题无关。

另外，我使用的是 Firefox 68.0.1，但我不认为它与 W3school example 相关按预期工作。

我已经尝试了各种指南(从 W3school 开始，它将 <input> 放在 <label> </label> 中)但它们都不起作用。

我展示的是可以看到标签的那个(其他的只是展示了 6 个非常接近的 radio )。

<div class="container h-100 d-flex justify-content-around align-items-center">
   <form action="doSomething" method="POST">
      <div class="form-group">
         .
         .
         .
         Parts of the form actually working
         .
         .
         .
         <div class="container">
            <div name="language0" class="container">
               <div class="form-check-inline">
                  <label class="form-check-label" for="Italiano0"> Italiano  A1</label>
                  <input class="form-check-input" type="radio" name="Italiano0" id="Italiano0" value="Italiano0">
               </div>


               <div class="form-check-inline">
                  <label class="form-check-label" for="Italiano1">A2</label>
                  <input class="form-check-input" type="radio" name="Italiano1" id="Italiano1" value="Italiano1">
               </div>

            **This is repeated for each level from a1 to c2 and for each language**

            </div>
            <div name="language1" class="container>
               .
               .
               .
            </div>
         </div>
      </div>
   </form>
</div>

Answer 1

尝试保持输入的名称相同。如下图

<div class="form-check-inline">
  <label class="form-check-label" for="Italiano0"> Italiano  A1</label>
  <input class="form-check-input" type="radio" name="Italiano123" id="Italiano0" value="Italiano0">
</div>


<div class="form-check-inline">
  <label class="form-check-label" for="Italiano1">A2</label>
  <input class="form-check-input" type="radio" name="Italiano123" id="Italiano1" value="Italiano1">
</div>