如何在选择第二个单选按钮时取消选中第一个单选按钮，并在有 2 个单选组时取消选中？答案

【问题标题】：How can uncheck the first radio button when selecting the second one and reverse when having 2 radio groups?如何在选择第二个单选按钮时取消选中第一个单选按钮，并在有 2 个单选组时取消选中？
【发布时间】：2022-02-05 16:47:40
【问题描述】：

我想存档，如果我选择第一个单选按钮，我应该收到值 true，并且第二个单选按钮应该被取消选择，并且如果我选择第二个单选按钮，我应该收到值 false 也相反值true 和第一个单选按钮应该被取消选择并接收值false：重要的是，在提交时为每个 Radio 在后端发送 2 个参数 True/False，这就是我没有将它们放在同一组中的原因

这是我的实际 html 组件：

  <div class="col-3 col-sm-3 col-md-3 mb-2">
      <mat-radio-group aria-label="Select an option" formControlName="male">
        <mat-radio-button [value]="true" [checked]="false" [(ngModel)]="male" name="male" (change)="firstRadioChange($event)">Male</mat-radio-button>
      </mat-radio-group>
      <mat-radio-group aria-label="Select an option" formControlName="female">
      <mat-radio-button [value]="false" [checked]="false" [(ngModel)]="female" name="female" (change)="secondRadioChange($event)" >Female</mat-radio-button>
    </mat-radio-group>
    </div>

这是我的 ts：

 firstRadioChange($event){
    console.log($event.value) 
  }

  secondRadioChange($event){
    console.log($event.value) 
  }

【问题讨论】：

因为后端需要 2 个参数，所以 Male: True/False 和 Famale: True/False 并且默认情况下都应该是 false，因为有一部分过滤器组件 @DavidFontes
好吧，我这样做的方式是，在将数据发送到服务器之前，将我的模型映射到服务器期望的模型，这样我就可以使用一组。
@DavidFontes 请在stackblitz.com分享你的方式
我已经添加了我的答案here。

标签： javascript html angular

【解决方案1】：

我只是将单选按钮分组，默认情况下只能启用其中一个。

<mat-radio-group aria-label="Select an option" (change)="onChange($event)">
  <mat-radio-button value="1">Option 1 Male</mat-radio-button>
  <mat-radio-button value="2">Option 2 Female</mat-radio-button>
  <br>
  <br>
  Selected value: {{selectedValue | json}}, send to backend sex as: {{selectedSexObj | json}}
</mat-radio-group>

@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
  selectedSexObj = { male: false, female: false };
  selectedValue: any;
  onChange(event: any) {
    this.selectedValue = event.value;
    if (event.value == 1) {
      this.selectedSexObj = { male: true, female: false };
    } else {
      this.selectedSexObj = { male: false, female: true };
    }
  }
}

这是一个工作示例：https://stackblitz.com/edit/angular-qggcqg-qydurn?file=src%2Fapp%2Fradio-overview-example.ts

【讨论】：

您的代码不能解决我的问题，因为如果我必须向后端发送一个参数，就会出现这种情况，但问题是后端需要 2 个参数，所以 Famale: True/False and Male : True/False 和默认值都应该是 false 因为它们是过滤器的一部分 @Joosep.P
好吧，公平地说，之前没有提到。但是我已经为你更新了我的代码。无论哪种方式，onChange() 函数应该非常清楚如何读取单选按钮值的变化。如果不先看到它，我无法为您实现您的“后端对象”。希望这会有所帮助！

【解决方案2】：

关于您的尝试的几点说明。

您同时使用 模板驱动表单 和 反应式表单，您应该在每个输入上只使用一个，否则它们可能会相互干扰。在下面的演示中，我使用了 Reactive Forms 方法。
您使用了 2 个mat-radio-group，但您应该只使用一个用于 UI，然后在发送数据之前，根据需要修改数据。

这里是相关代码：

HTML

<div class="col-3 col-sm-3 col-md-3 mb-2">
  <mat-radio-group aria-label="Select an option" [formControl]="gender">
    <mat-radio-button value="male"> Male </mat-radio-button>
    <mat-radio-button value="female"> Female </mat-radio-button>
    <mat-radio-button value="other"> Other </mat-radio-button>
  </mat-radio-group>
</div>

gender: FormControl = new FormControl('male');

submit() {
  const responseToServer = {
    male: this.gender.value === 'male',
    female: this.gender.value === 'female',
    other: this.gender.value === 'other',
  };

  this.http.post('your-server-url', responseToServer);
}

StackBlitz Demo

【讨论】：

【解决方案3】：

您可以按照这个例子进行

单选按钮通常应放置在内部，除非 DOM 结构无法做到这一点（例如，单选按钮位于表格单元格内）。 radio-group 有一个 value 属性，它反映组内当前选定的单选按钮。

https://stackblitz.com/edit/angular-tgufpa?file=src%2Fapp%2Fradio-overview-example.html

【讨论】：

您的代码不能解决我的问题，因为如果我必须将一个参数发送到后端，就会出现这种情况，但问题是后端需要 2 个参数，所以 Famale: True/False and Male : True/False 和默认值都应该是 false，因为它们是过滤器的一部分
第一次他们都是假的。如果你检查男性，男性：真和女性：假，如果你检查女性，那么女性：真，男：假

【解决方案4】：

我不熟悉angular，你最后提交表单到服务器端吗？如果是这样，您可以使用一个带有两个选项作为 ui 的无线电组，但将其作为第一个选项 true/false 数据发送，对于第二个选项可以使用隐藏输入，您可以在将无线电组更改为无线电组的相反值时手动设置。

【讨论】：