Angularjs set checkbox checked
Angularjs set checkbox checked : There are many ways to set checkbox checked on button click. You can use ng-checked to check a checkbox in AngularJs. Here in this tutorial we are going to explain how you can set checkbox checked in AngularJs. You can also use our online tool to run and edit the code.
Angularjs set checkbox checked on Button Click Example
You can set checkbox checked on button click as below-
JavaScript Part –
JavaScript Part Contains the following script –
Angularjs set checkbox checked on Button Click : JavaScript
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.checkBoxChecked = function() {
if(!$scope.master){
$scope.master = true;
}else{
$scope.master = false;
}
}
});
</script>
|
Html Part-
Html Part Contains the following html –
Angularjs set checkbox checked on Button Click:
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click ="checkBoxChecked()" ng-model='master'>Click to Check </button>
<br>
<input type="checkbox" ng-checked ="master">
<br>
</div>
</div>
|
Complete Example-
Now let us combine both javascript and html parts. Here is the complete example –
How to set checkbox checked on Button Click Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.checkBoxChecked = function() {
if(!$scope.master){
$scope.master = true;
}else{
$scope.master = false;
}
}
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click ="checkBoxChecked()" ng-model='master'>Click to Check </button>
<br>
<input type="checkbox" ng-checked ="master">
<br>
</div>
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
