Question

如何检查此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>

Answer 1

有效：

＆＃13;

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);
        };
      })

＆＃13;

<!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>

＆＃13;

Answer 2

我建议你改用ng-model。

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

然后在您的控制器$scope.checkbox1中，如果选中是否选中该复选框，则为真或假。

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

Answer 3

您可以使用ng-model

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 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>

检查Angular中是否选中了复选框

4 个答案: