HTML Checkbox - 允许检查多个复选框[重复]答案

【问题标题】：HTML Checkbox - allow to check mutliple checkboxes [duplicate]HTML Checkbox - 允许检查多个复选框[重复]
【发布时间】：2016-02-14 09:21:55
【问题描述】：

我有 html 代码，它以网格格式显示内容，即一行三列，每个输入字段都可以检查。但是，我无法使用以下代码检查多个复选框。无论我选择什么复选框，都只会触发和检查列表中的第一个框。其他人仍然是 ng-prestine。我的代码会有什么问题

 <table>
     <tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
         <td ng-repeat="allergy in allergyList track by $index">
             <div class="ice-form-checkbox">
                 <input id="condition" ng-model="selectedAllergy" type="checkbox"/><label for="condition"><span>{{allergy.allergyName}}</span></label>
             </div>
         </td>
     </tr>
 </table>

【问题讨论】：

他们都有相同的id吗？
您正在使用ng-repeat，然后在您的input 上有一个固定的ID，因此，allergyList 中的每个input 过敏都会有id="condition"，这在语法上是不正确的
“只有第一个框被触发和检查”是什么意思。从视觉上看，正确的复选框已选中，但也许您希望特定值最终出现在 selectedAllergy 中？

标签： javascript html angularjs checkbox

【解决方案1】：

模型 selectedAllergy 存在于主范围中。将其设置为“allergy.selected”。

【讨论】：

【解决方案2】：

您正在使用ng-repeat，然后在您的input 上有一个固定的ID，因此，每个input allergy in allergyList 都会有id="condition"，这是不正确的HTML

这可能会导致只能选择一个复选框的效果。尝试将其更改为一个类，看看会发生什么。

【讨论】：

重复的id不会造成影响。

【解决方案3】：

您只为复选框提供了一个变量作为模型。你应该给一个数组赋予属性，如下所示：（运行代码片段以查看它的工作）

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options =         
    [
    	[{id: 1}, {id: 2}, {id: 3}],
        [{id: 4}, {id: 5}, {id: 6}],
        [{id: 9}, {id: 8}, {id: 9}]
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="row in options">
      <td ng-repeat="item in row">
        <p>Op {{item.id}}</p>
        <input ng-model="item.value" type="checkbox" />
      </td>
    </tr>
  </table>

  <div ng-repeat="row in options">{{row}}
    <br>
  </div>
</div>

【讨论】：