自定义单选按钮分组

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