正确使用HTML radiobutton的方法？

Question

我有3个radiobuttons。我希望它们像radiobuttons一样：如果用户单击一个，则不能单击另一个。但不知何故，我的按钮就像复选框一样，用户可以选择全部3.这是我的代码，我缺少什么？谢谢！

<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>

这是显示问题的图像。我不会将W3Schools用作学习资源，我只是使用他们的HTML编辑器来展示这个例子。

Answer 1

组中的所有单选按钮必须具有name属性的相同值。这就是它们互相排斥的原因。

这里<input type='radio'> {{1}}包括：

  

＆＃34;名称＆＃34;设置是单选按钮的一个重要属性，因为它   识别单选按钮属于哪个组。因为群体   单选按钮作为一个单元，您必须为所有人指定一个通用名称   相关的单选按钮。当两个或多个单选按钮共享一个名称时，   选择其中一个按钮将取消选中所有其他按钮   一样的名字。如果你有一组以上的单选按钮   单页，不同组中的按钮必须有不同   ＆＃34;名称＆＃34;属性。

Answer 2

使用name属性将单选按钮组合在一起。给他们相同的name。

<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
   <label for="input-status1" ></label>
   <input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
   <label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
   <label for="input-status2" ></label>
   <input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
   <label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
   <label for="input-status3" ></label>
   <input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
   <label class="radio-label">Option 3</label>
</div>