检查Angular中是否选中了复选框[重复]答案

【问题标题】：Check if checkbox is checked or not in Angular [duplicate]检查Angular中是否选中了复选框[重复]
【发布时间】：2017-02-22 10:48:02
【问题描述】：

在这个 Angular 示例中如何检查复选框是否被选中/选中？因此，当用户选择/选中第一个复选框时，我希望得到 true，而当取消选择/取消选中它时，我希望得到 false。

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.toggleSelection = function toggleSelection() {
      // how to check if checkbox is selected or not

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
  <h1>Get checkbox selection (true/false)</h1>
  <label>
    <input id="one" type="checkbox" ng-click="toggleSelection()">This
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">That
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Lorem
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Ipsum
  </label>
</div>

【问题讨论】：

虽然这个问题被标记为重复，但这里选择的答案效果更好。

标签： javascript angularjs

【解决方案1】：

有效：

angular.module('app', [])
      .controller('Controller', function($scope) {
        $scope.toggleSelection = function toggleSelection(event) {
          // how to check if checkbox is selected or not
          alert(event.target.checked);
        };
      })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <h1>Get checkbox selection (true/false)</h1>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> This
    </label>
    <br>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> That
    </label>
    <br>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> Lorem
    </label>
    <br>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> Ipsum
    </label>
  </div>
</body>

</html>

【讨论】：

谢谢，这正是我需要的！

【解决方案2】：

我建议你改用ng-model。

<input type="checkbox" ng-model="checkbox1">

然后在您的控制器中，$scope.checkbox1 将根据复选框是否被选中而为真或假。

if($scope.checkbox1){
    //Checkbox is checked
} else {
    //Checkbox is not checked
}

【讨论】：

【解决方案3】：

你可以使用 ng-model

angular.module('app', [])
      .controller('Controller', function($scope) {
       
        
      })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <h1>Get checkbox selection (true/false)</h1>
    <label>
      <input type="checkbox" ng-model="m1">   This:   {{m1}} 
    </label>
    <br>
    <label>
      <input type="checkbox" ng-model="m2"> That:  {{m2}} 
    </label>
    <br>
    
  </div>
</body>

</html>

【讨论】：

【解决方案4】：

使用ng-model 将变量与您可以在$scope.toggleSelection 函数中访问的复选框绑定。这是实现

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.toggleSelection = function toggleSelection() {
       console.log($scope.firstCheckBox);    
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
  <h1>Get checkbox selection (true/false)</h1>
  <label>
    <input id="one" type="checkbox" ng-click="toggleSelection()" ng-model="firstCheckBox">This
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">That
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Lorem
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Ipsum
  </label>
</div>

【讨论】：