How to toggle between different checkboxses Angular

Question

I have four check boxes every click on a check box initiates a different function. One one check box is selected all other should be deselected. I have the following code but the problem is that I cannot toggle between check without first manually removing the check mark and then selecting the other one. My code:

  $scope.checkbox = function(key){
        if($scope.checkbox1 === true){
          $scope.checkbox2 = false
          $scope.checkbox3 = false
          $scope.checkbox4 = false
          $scope.checkboxValue = 'checkbox one was clicked'
          callfunctionOne()
        } else if($scope.checkbox2 === true){
           $scope.checkbox1 = false
          $scope.checkbox3 = false
          $scope.checkbox4 = false
          $scope.checkboxValue = 'checkbox two was clicked'
          callfunctiontwo()
        } else if($scope.checkbox3 === true){
           $scope.checkbox1 = false
          $scope.checkbox2 = false
          $scope.checkbox4 = false
          $scope.checkboxValue = 'checkbox three was clicked'
          callfunctionthree()
        } else if($scope.checkbox4 === true){
           $scope.checkbox1 = false
          $scope.checkbox2 = false
          $scope.checkbox3 = false
          $scope.checkboxValue = 'checkbox Four was clicked'

       callfunctionFour()
        } 

        }

Plunker

for that you can use radio button

Rakesh Chand
– Rakesh Chand

2016-09-15 10:35:36 +00:00
Commented Sep 15, 2016 at 10:35 — Rakesh Chand
– Rakesh Chand, Commented Sep 15, 2016 at 10:35

taguenizy · Accepted Answer · 2016-09-15 10:38:11Z

2

  $scope.checkbox = function(key){
    $scope.checkbox1 = false
    $scope.checkbox2 = false
    $scope.checkbox3 = false
    $scope.checkbox4 = false
    $scope[key] = true;
    $scope.checkboxValue = 'checkbox '+key+' was clicked'
 }

You should consider using radio buttons but this code allows you to do what you want.

answered Sep 15, 2016 at 10:38

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Imi Over a year ago

Thanks a lot this is really helpful but if I want to call a seprate function each time one condition is true how can I do that?

taguenizy Over a year ago

@lmi I would change the ng-change for the function you want and just call $scope.checkbox(key) inside it or do a switch inside the $scope.checkbox function. It's really up to you but if you have any issues just update the plunker

Aaditya Sharma · Accepted Answer · 2016-09-15 11:30:07Z

You can use this approach for your code:

Use one common variable for ng-model for all checkboxes,
and then use ng-true-value to identify which checkbox was selected

Example: Plunker

<!-- AngularJS Code -->
<script type="text/javascript">
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.setValues = function(){
    $scope.checkbox1 = false;
    $scope.checkbox2 = false;
    $scope.checkbox3 = false;
    $scope.checkbox4 = false;

    $scope['checkbox'+tempVariable] = true;
  };
});
</script>

<!-- HTML Code -->
<label class="label--checkbox " id="checkbox1">
  <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="1">
  <span class="checkboxLabelText">
    Checkbox 1 : {{checkbox1}}
  </span>
</label>

<label class="label--checkbox" id="checkbox2">
  <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="2">
  <span class="checkboxLabelText">
    Checkbox 2 : {{checkbox2}}
  </span>
</label>

<label class="label--checkbox" id="checkbox3">
  <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="3">
  <span class="checkboxLabelText">
    Checkbox 3 : {{checkbox3}}
  </span>
</label>

<label class="label--checkbox" id="checkbox4">
  <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="4">
  <span class="checkboxLabelText">
    Checkbox 4 : {{checkbox4}}
  </span>
</label>

ngCoder · Accepted Answer · 2016-09-15 13:25:09Z

1

I assume you got the required answer but here's an nice custom directive for Multi checkbox which handles most of the cases.

answered Sep 15, 2016 at 13:25

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

1 Comment

Imi Over a year ago

Great! Thanks you are right I already got the answer but this will be very helpful in the future

Collectives™ on Stack Overflow

How to toggle between different checkboxses Angular

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related