问题

<label>
    <input class="mr_5" type="radio" name="test" value="1" [(ngModel)]="test">{{'test1'}}
    <div class="dis_flex">
        <input class="mr_5" type="radio" name="test" value="2" [(ngModel)]="test">{{'test2'}} <div class="btn">{{'test button'}}</div>
    </div>
</label>

问题描述：点击按钮后会自动选择第一个选项

原因

这里需要知道两个关于 <label> 的原理：

1.当你点击一个 <label>，浏览器默认会去它所关联的第一个可交互控件（如 input、radio、checkbox、button），这是浏览器对 <label> 的原生行为。

2.<div> 默认不是一个可交互的控件，浏览器会把它当作 <label> 的一部分来对待。

具体流程：

当你在 <label> 内部点击 <div>，浏览器会认为你是在点击 label 本身，于是就会触发 label 关联的 <input type="radio"> 的点击行为，并且直接关联第一个可交互控件，所以自动选择了第一个选项。

解决方法

方法1：

可以将 <div class="btn">{{'test button'}}</div> 更改为 <button> 或者其他可交互控件，避免浏览器认为你是在点击 label 本身，比如：

<label>
    <input class="mr_5" type="radio" name="test" value="1" [(ngModel)]="test">{{'test1'}}
    <div class="dis_flex">
        <input class="mr_5" type="radio" name="test" value="2" [(ngModel)]="test">{{'test2'}} <button>{{'test button'}}</button>
    </div>
</label>

效果：

方法2：

舍弃 <label>，直接使用<div>

<div>
    <input class="mr_5" type="radio" name="test" value="1" [(ngModel)]="test">{{'test1'}}
    <div class="dis_flex">
        <input class="mr_5" type="radio" name="test" value="2" [(ngModel)]="test">{{'test2'}} <button>{{'test button'}}</button>
    </div>
</div>

效果：