时间戳

首页 > 解决方案 > 多个单选按钮未在一组四个单选按钮中均匀选择

angular - 多个单选按钮未在一组四个单选按钮中均匀选择

问题描述

在一个角度片段中，一组单选按钮没有均匀地点击。具有名称的单选按钮数量为四个，但只有第一个和最后一个单选按钮正在单击。下面是我的片段

<div class="grouped fields">
  <label>Please confirm your company type by ticking the appropriate 
                  box below (Only one box must be ticked).</label>
  <div class="field">
    <div class="ui radio checkbox">
      <input [(ngModel)]="aData.type" type="radio" name="typeC" checked="checked" id="100" [value]="true">
      <label for="100">A OPTION</label>
    </div>
  </div>
  <div class="field">
    <div class="ui radio checkbox">
      <input [(ngModel)]="aData.type" type="radio" name="typeC" id="101" [value]="false">
      <label for="101">B OPTION</label>
    </div>
  </div>
  <div class="field">
    <div class="ui radio checkbox">
      <input [(ngModel)]="aData.type" type="radio" name="typeC" id="102" [value]="false">
      <label for="102">C OPTION</label>
    </div>
  </div>
  <div class="field">
    <div class="ui radio checkbox">
      <input [(ngModel)]="aData.type" type="radio" name="typeC" id="103" [value]="false">
      <label for="103">D OPTION </label>
    </div>
  </div>
</div>

请我如何确保只有一个被选中

标签： angular

解决方案

问题

您有一个单选按钮绑定到false. 该值应绑定到您希望单选按钮返回的值

解决方案

您只需要为输入设置唯一值，例如[value]="100"

<div class="grouped fields">
    <label>Please confirm your company type by ticking the appropriate 
                  box below (Only one box must be ticked).</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input [(ngModel)]="aData.type"
                    type="radio" name="typeC" checked="checked" id="100" [value]="100">
            <label for="100">A OPTION</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input [(ngModel)]="aData.type"
                    type="radio" name="typeC" id="101" [value]="101">
            <label for="101">B OPTION</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input [(ngModel)]="aData.type"
                    type="radio" name="typeC" id="102" [value]="102">
            <label for="102">C OPTION</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input [(ngModel)]="aData.type"
                    type="radio" name="typeC" id="103" [value]="103">
            <label for="103">D OPTION </label>
        </div>
    </div>

在 Stackblitz 上查看此演示

推荐阅读