为什么我可以同时选择两个单选按钮？

Question

为什么我可以同时选择两个单选按钮？

<form #form="ngForm"> 
    {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} 
    <br> 
    {{ poll.counter2 }} votes <input type="radio" id="{{ poll.choice2 }}" value="{{ poll.choice2 }}" (click)="onChoice2(form)">{{ poll.choice2 }} 
    </form> 

Answer 1

如果你只想选择一个，你必须给这两个单选按钮同名。

<form #form="ngForm"> 
    {{ poll.counter1 }} votes <input type="radio" name="my_radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }}   
    {{ poll.counter2 }} votes <input type="radio" name="my_radio" id="{{ poll.choice2 }}" value="{{ poll.choice2 }}" (click)="onChoice2(form)">{{ poll.choice2 }} 
</form> 

你可以在这里尝试一下：

<label>Radio A</label> 
 
<input type="radio" name="foo"> 
 
<label>Radio B</label> 
 
<input type="radio" name="foo"> 
 

 
<h2>Without the same name</h2> 
 
<label>Radio X</label> 
 
<input type="radio"> 
 
<label>Radio Y</label> 
 
<input type="radio">