自定义单选按钮分组

Question

我有一个场景，我需要将三个选项排列为高，中或低。我有三个单选按钮，每个选项的值分别为高，中，低。选择必须互相排斥。

JSFIDDLE

HTML

<label>Option : 1</label>
<input name="high" type="radio" value="H"> High
<input name="medium" type="radio" value="M"> Medium
<input name="low" type="radio" value="L"> Low

<br/>
<label>Option : 2</label>
<input name="high" type="radio" value="H"> High
<input name="medium" type="radio" value="M"> Medium
<input name="low" type="radio" value="L"> Low
<br/>

<label>Option : 3</label>
<input name="high" type="radio" value="H"> High
<input name="medium" type="radio" value="M"> Medium
<input name="low" type="radio" value="L"> Low

通过这种方式命名radion按钮，我可以避免多次high选择。但是，这导致允许为单个选项选择所有选项，因为每个选项都有不同的单选按钮。

我知道这可以通过一些JQuery验证来实现。但是，需要知道是否还有其他方法可以使用HTML本身。

感谢。

Answer 1

如果我理解正确，这应该是正确的方法。

<label>Option : 1</label>
<input name="option1" type="radio" value="H"> High
<input name="option1" type="radio" value="M"> Medium
<input name="option1" type="radio" value="L"> Low

<br/>
<label>Option : 2</label>
<input name="option2" type="radio" value="H"> High
<input name="option2" type="radio" value="M"> Medium
<input name="option2" type="radio" value="L"> Low
<br/>

<label>Option : 3</label>
<input name="option3" type="radio" value="H"> High
<input name="option3" type="radio" value="M"> Medium
<input name="option3" type="radio" value="L"> Low