Question

我希望当我在复选框中更改选择时，将选中唯一选中的复选框，并取消选中上一个选中的复选框。我的代码正在运行，但我真的只想选择一个复选框。在我看来。

      <center><table></center>
      <tr> 
      <th><center>
      List of Names</center></th>
      <th colspan="3">
      Actions
      </th></tr>
      <tr ng-repeat="role in roles">
      <td>
      <label>
      <ion-checkbox ng-model="isChecked" ng-   
      change="format(isChecked,role,$index)" 
      ng-init="isChecked=false"><div class="wew">
      {{role}}
      </div></ion-checkbox>
      </label> 
      </td>
      <td>
     <button ng-hide="!isChecked" ng-click="present()">P </button> </td>
     <td>
      <button ng-hide="!isChecked"  ng-click="late()">L</button></td>
      <td><button ng-hide="!isChecked" ng-click="absentss()">A</button></td>
      <td><button ng-hide="!isChecked" ng-click="delete()">D</button></td>
       </tr> </table>

我认为在我的控制器中是我需要更改代码以获得正确结果的部分。

        $scope.isChecked = false;
        $scope.selected = [];
        $scope.format = function (isChecked, role, index) {
        if (isChecked==true) {
        $scope.selected.push(role);
        }
        else {
        var _index = $scope.selected.indexOf(role);
        $scope.selected.splice(_index, 1);
        }
        var students = $scope.selected;
        console.log(students);
        for( var s=0; s<students.length; s++) {
         $scope.stud = [
        students[s]
        ]
        };

先谢谢你！我希望有人可以帮助解决这个问题。

Answer 1

复选框用于组内的多个选择。改为使用单选按钮。

Answer 2

＆＃13;

Example With AngularJs
This is way you can also implement.
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module('app', []).controller('appc', ['$scope',
      function($scope) {
        $scope.selected = 'other';  //default selection
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
  </div>



</body>

</html>

＆＃13;

选中一个复选框并取消选中上一个选中的复选框

2 个答案: