AngularJs。是不是可以通过单击取消选择 HTML“收音机”输入？

Posted 2023-03-05

【中文标题】AngularJs。是不是可以通过单击取消选择 HTML“收音机”输入？

【英文标题】：AngularJs. Is it possible to deselect HTML “radio” input by click?AngularJs。是否可以通过单击取消选择 HTML“收音机”输入？

【发布时间】：2014-10-16 01:43:20

【问题描述】：

我有收音机输入，如果选中当前收音机，我想通过单击收音机来检查状态。

这段代码：

<input type="radio" id="average_0" name="average" ng-model="checked" ng-change="false" value="500" class="ng-valid ng-dirty">
<input type="radio" id="average_1" name="average" ng-model="checked" ng-change="false" value="1000" class="ng-valid ng-dirty">
<input type="radio" id="average_2" name="average" ng-model="checked" ng-change="false" value="1500" class="ng-valid ng-dirty">

不工作。

小提琴：http://jsfiddle.net/Zoomer/8s4m2e5e/

【参考方案1】：

你可以在下面使用。 设置一个属性。

public selectedMoiProfile : boolean  = false;

<input type="radio" 
       name="selectMoi"
       [checked]="selectedProfile"
       [value]="selectedProfile"
       (click)="onSelect(moiProfile)"
       class="selectMoi">


 onSelect(p: profile) 
     p.selectedProfile= p.selectedProfile? false : true;
 

【参考方案2】：

适用于 Angular 1.3+ 的简单解决方案是：

模板

<input type="radio" ng-model="forms.selected" value="value" ng-click="radioCheckUncheck($event)">

控制器

  let lastChecked = null
  $scope.radioCheckUncheck = function (event) 
    if (event.target.value === lastChecked) 
      delete $scope.forms.selected
      lastChecked = null
     else 
      lastChecked = event.target.value
    
  

它类似于上面的解决方案，但保留了之前选择的自己的副本。

【讨论】：

伟大的作品很好的 Angular 1.3+

【参考方案3】：

一个更简单的解决方案是添加：

ng-dblclick = "checked = null"

【参考方案4】：

我用以下代码解决了这个问题：

ng-dblclick = "model = '' "

【参考方案5】：

单选按钮一次只能选择一个，一旦选中，用户就不能取消选中（除非您以编程方式进行）。所以如果你想在当前选中时取消选中它，你可以这样做：

<input type="radio" ng-model="checked" value="500" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1000" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1500" ng-click="uncheck($event)" />

在您的控制器中：

$scope.uncheck = function (event) 
    if ($scope.checked == event.target.value)
        $scope.checked = false

演示：http://jsfiddle.net/8s4m2e5e/3/

注意：如果您真的想从众多选项中选择一个或一个都不选，您可以选择<select>

【讨论】：

哦，谢谢！我知道理论，但我不知道如何在 Angular 中做到这一点。

好的，我接受。再次感谢，当前版本的答案对我来说非常好。

你不是说答案第一句中的单选按钮吗？

这不再适用于 Angular 1.3。在 1.3 中，选中的值在点击事件触发之前设置为“xyz”。

如何在没有 jQuery（并且没有直接的用户交互）的情况下以编程方式取消选中单选按钮？