自定義單選按鈕分組

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