AngularJs get checkbox value


AngularJs get checkbox value – While using the html form input elements we sometimes need checkboxes. It is very simple to get the selected(checked) checkbox value in angularjs. Here in this tutorial we are going to explain how you can get the selected checkbox value. You can also use our online editor to edit and run the code online.


AngularJs get checkbox value | Selected Checkbox | Example

Let us go step by step to get the checked checkbox value-

JavaScript Part

JavaScript Part Contains the following part as below –

AngularJs get checkbox value in controller:

 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
$scope.selectedCheckboxes = '';
 $scope.getSelectedCheckboxes= function(myCheckbox) {
     // copy data	 
	 //alert(myCheckbox);
	 $scope.selectedCheckboxes = angular.copy(myCheckbox);
        // or you can get the checkbox values individually as below 
        // $scope.value1 = myCheckbox.value1;
        // $scope.value2 = myCheckbox.value2;
        // $scope.value3 = myCheckbox.value3;
        // $scope.value4 = myCheckbox.value4;
 };
});
</script>

Html Part

Html Part contains the following html as below –

AngularJs get checkbox value in View:


<div ng-app="myApp">  
<div ng-controller="myController">  
<form action="javascript:void(0)">
        Checkbox1 : <input type="checkbox" name="checkbox1"  ng-model='myCheckbox.value1' /><br />
        Checkbox2 : <input type="checkbox" name="checkbox2"  ng-model='myCheckbox.value2' /><br />
        Checkbox3 : <input type="checkbox" name="checkbox3"  ng-model='myCheckbox.value3' /><br />
        Checkbox4 : <input type="checkbox" name="checkbox4"  ng-model='myCheckbox.value4' /><br />
  
    
        <button ng-click="getSelectedCheckboxes(myCheckbox)">Get Value</button>
 </form>
 <p>Selected Checkboxes = {{selectedCheckboxes | json}}</p>
<p>Value1 = {{selectedCheckboxes.value1}}</p>
<p>Value2 = {{selectedCheckboxes.value2}}</p>
<p>Value3 = {{selectedCheckboxes.value3}}</p>
<p>Value4 = {{selectedCheckboxes.value4}}</p>
 
</div> 
</div>

Complete Part

Now let us combine both html and JavaScript parts –

Angularjs get multiple checkbox value 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.selectedCheckboxes = '';
 $scope.getSelectedCheckboxes= function(myCheckbox) {
     // copy data	 
	 //alert(myCheckbox);
	 $scope.selectedCheckboxes = angular.copy(myCheckbox);
        // or you can get the checkbox values individually as below 
        // $scope.value1 = myCheckbox.value1;
        // $scope.value2 = myCheckbox.value2;
        // $scope.value3 = myCheckbox.value3;
        // $scope.value4 = myCheckbox.value4;
 };
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
<form action="javascript:void(0)">
        Checkbox1 : <input type="checkbox" name="checkbox1"  ng-model='myCheckbox.value1' /><br />
        Checkbox2 : <input type="checkbox" name="checkbox2"  ng-model='myCheckbox.value2' /><br />
        Checkbox3 : <input type="checkbox" name="checkbox3"  ng-model='myCheckbox.value3' /><br />
        Checkbox4 : <input type="checkbox" name="checkbox4"  ng-model='myCheckbox.value4' /><br />
  
    
        <button ng-click="getSelectedCheckboxes(myCheckbox)">Get Value</button>
 </form>
 <p>Selected Checkboxes = {{selectedCheckboxes | json}}</p>
<p>Value1 = {{selectedCheckboxes.value1}}</p>
<p>Value2 = {{selectedCheckboxes.value2}}</p>
<p>Value3 = {{selectedCheckboxes.value3}}</p>
<p>Value4 = {{selectedCheckboxes.value4}}</p>
 
</div> 
</div>
</body>  
</html>      
                                                        

Try it »

If you run the above example it will produce output something like this –

angularjs get multiple checkbox value


Advertisements

Add Comment

📖 Read More