Javascript 仅允许选中一个复选框，角度最佳做法。

我用的是有角度的。 我在一个组中有三个复选框，我想确保只能选中其中一个。因此，如果一个被检查，其他两个必须被取消检查。我可以考虑使用原生JS或jQuery使用几种方法，但我想知道是否有一种典型的角度方法

这是带有一组复选框和角度控制的Plunker。

{{vm.Output}






A1
A2
A3





{{vm.Output}

为什么不使用单选按钮呢

<label>
  <input type="radio" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
<label>
  <input type="radio" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
<label>
  <input type="radio" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>

A1
A2
A3

由于您不能使用单选按钮，因此当您选中其中一个按钮时，我已创建此plnkr，其他按钮将被取消选中：

A1
A2
A3

希望有帮助（）

---

编辑：您可能可以更改controller for best practice中其他复选框的状态，这些复选框是用html制作的，只是为了更快速地演示。

您可能希望以艰难的方式完成。它应该会起作用

changeGroupA:函数（x）
{
如果（x=='A1'）{
$scope.vm.a1=真；
$scope.vm.a2=false；
$scope.vm.a3=假；
}
如果（x=='A2'，则为else）{
$scope.vm.a2=真；
$scope.vm.a1=假；
$scope.vm.a3=假；
}
如果（x=='A3'）{
$scope.vm.a3=真；
$scope.vm.a1=假；
$scope.vm.a2=false；
}
this.Output='（'+this.count+'）'+this.Output；
这个是.count++；
},

另一种方法是：

A1
A2
A3

控制器将如下所示：

$scope.vm = {

  groupA: [false, true, false],
  count : 0,

  changeGroupA : function (index)
  {


    for (i = 0, len = this.groupA.length; i < len; ++i) {
      this.groupA[i] = ((1 << index) & (1 << i)) > 0;
    }


    this.Output = '(' + this.count + ')' + this.Output;
    this.count ++;

  },

  Output : 'Here we go'

}

$scope.vm={
A组：[假，真，假]，
计数：0，
changeGroupA:函数（索引）
{
对于（i=0，len=this.groupA.length；ithis.groupA[i]=（（1这对角度为6或8的情况非常有效

HTML:

那么你不应该使用单选按钮吗？如果只有一个单选按钮可以选中的话？我试过了，但是没有。因为任务的具体情况。单选按钮不能被选中，而且模型没有空间放置额外的“未选中”单选按钮。老实说，改变设计为第四个单选按钮腾出空间比使用t复选框更有意义他的。使用内置的本机收音机绝对是最好的做法。单击选中的收音机时，只需取消选中所有项。好的，但我不允许这样做。如果我愿意，我知道怎么做。这不是我需要帮助的。我试过了，但没有。因为任务的具体情况。单选按钮不能取消选中，模型没有多余的“无”空间你可能应该把它放在你的原始问题中。太棒了！我知道有一个很好的角度方法。我爱你。
  <br><br><br>
  <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[0]" ng-change="vm.changeGroupA(0)" >  A1  </label> 
  <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[1]" ng-change="vm.changeGroupA(1)" >  A2  </label>
  <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[2]" ng-change="vm.changeGroupA(2)" >  A3  </label>

  <br><br><br>

$scope.vm = {

  groupA: [false, true, false],
  count : 0,

  changeGroupA : function (index)
  {


    for (i = 0, len = this.groupA.length; i < len; ++i) {
      this.groupA[i] = ((1 << index) & (1 << i)) > 0;
    }


    this.Output = '(' + this.count + ')' + this.Output;
    this.count ++;

  },

  Output : 'Here we go'

}

<div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="check1id" 
                [(ngModel)]="check1" (change)="onlyOneValue($event)"/>
                <label for="check1id" class="custom-control-label">Checkbox 1</label>
</div>

<div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="check2id"
                [(ngModel)]="check2" (change)="onlyOneValue($event)" />
                <label for="check2id" class="custom-control-label"> Checkbox 2 </label>
</div>

check1=false;
check2=false;
onlyOneValue(e)
{
  if (e.target.id == "Check1id") {
      this.Check1= true;
      this.Check2 = false;
    }
 else  if (e.target.id == "Check1id") {
      this.Check1= true;
      this.Check2 = false;
    }
}