檢查是否勾選複選框

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

來源

2016-10-13 akuljana

雖然這個問題被標記爲重複，但選擇的答案在這裏效果更好。 – nik

它的工作原理：

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>

來源

2016-10-13 10:51:26

謝謝，這是我需要的！ – akuljana

我會建議你使用ng-model代替。

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

然後在你的控制器$scope.checkbox1將根據是否複選框被選中或不上是真或假。

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

來源

2016-10-13 10:51:11 Amygdaloideum

可以使用NG-模型

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>

來源

2016-10-13 11:11:49

使用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>

來源

2016-10-13 12:00:41

檢查是否勾選複選框

回答

相關問題