如何在角度中只检查一个复选框？答案

【问题标题】：How to check only one checkbox in angular?如何在角度中只检查一个复选框？
【发布时间】：2016-03-09 08:25:52
【问题描述】：

你能告诉我如何一次只选中一个复选框吗？我显示了一个弹出屏幕，其中显示了复选框。但用户可以选择多个复选框。我需要防止这种情况发生。我的意思是用户一次只能选择一个复选框。这是我的代码 http://plnkr.co/edit/p2xHhT7e72m3nnMjP7qC?p=preview

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<li class="dropdown" ng-controller="DropdownCtrl">
  <a class="dropdown-toggle">
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li class="checkbox"><input type="checkbox" class="selectCheckBox" ng-click="$event.stopPropagation()"/>Option 1</li>
    <li><input type="checkbox" checked="checked" ng-click="$event.stopPropagation()"/>Option 2</li>
        <li><input type="checkbox"  ng-click="$event.stopPropagation()"/>Option 3</li>

    </ul>
</li>
  </body>
</html>

想使用复选框而不是单选按钮

【问题讨论】：

通过单选按钮更改您的复选框。这就是他们的目的。为了将单选按钮绑定在一起，不要忘记为所有单选按钮添加名称属性，并为它们赋予相同的名称，并将所有单选按钮的 ng-model 指定到相同的字段。否则使用 ng-change 并在你的控制器中执行你的逻辑
我想使用复选框而不是定量按钮
所以在你的控制器中执行一个自定义逻辑来完成它。但就用户体验而言，我不建议这样做，人们希望单选按钮是一组唯一的选择，而不是复选框。
但在单选按钮中，您强制选择其中一项。但在复选框中，条件最多选择一个元素
表示用户一选一元素或不选择任何元素

标签： javascript angularjs angularjs-scope

【解决方案1】：

出于询问用户的压力，我删除了单选按钮部分。使用复选框进行单选的原因仍然很神秘。

替代方案：

如果您出于某种原因真的想使用复选框，请使用 ng-click 上的功能。

<input ng-click="unsetOtherOptions(value1)" 

$scope.unsetOtherOptions = function(value) {
    // unset all values
    for (var v in allValues) {
        v = false;
    }
    // reset value
    value = true;
}

【讨论】：

我不想使用单选按钮我只想使用复选框

【解决方案2】：

如 cmets 中所述，您可以使用 radio button。（请在此处提供示例）

另一种方法是将您的输入包装在表单字段中并使用自定义指令来验证它。（此处提供示例）

还请检查此 plunkr（在此处解释 plunkr 的作用） http://plnkr.co/edit/p3qv4vKR5r7QsF6EQe5D?p=preview

【讨论】：