Uncheck all checkboxes based on another checkbox using Angularjs

Question

I am trying to figure out that if the user checks N/A all the other boxes are unchecked (if they are checked). Below is what i have working, but I am not sure on how to uncheck those boxes and set them to false Any help is greatly appreciated.

var app = angular.module('MyApp', []);

app.controller('MyAppController', ['$scope',
  function($scope) {
    $scope.appliances = [{
        Name: 'N/A'
      },
      {
        Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      }
    ];

    $scope.myObj = {};
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]"> {{ app.Name }}
    </div>
  </div>
</div>

DavidX · Accepted Answer · 2018-01-30 19:24:24Z

You can use a ng-change to trigger a function to change the underlying content.

var app = angular.module('MyApp', []);
  
app.controller('MyAppController',['$scope',
  function($scope) {
  	$scope.appliances = [
    	{
      	Name: 'N/A'
      },
      {
      	Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
      	Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
      	Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      }
    ];
    
    $scope.myObj = {};

    $scope.checkForNA = function () {
        if ($scope.myObj[$scope.appliances[0].Name]) {
            $scope.myObj = {};
            $scope.myObj[$scope.appliances[0].Name] = true;
        }
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="checkForNA()">
      {{ app.Name }} 
    </div>
  </div>
</div>

Marcus Höglund · Accepted Answer · 2018-01-30 19:25:16Z

Something like this

var app = angular.module('MyApp', []);
  
app.controller('MyAppController',['$scope',
  function($scope) {
  	$scope.appliances = [
    	{
      	Name: 'N/A'
      },
      {
      	Name: 'Computer',
        ExcludedBy: 'N/A',
        IsSelected: false,
        IsDisabled: false
      },
      {
      	Name: 'TV',
        ExcludedBy: 'N/A',
        IsSelected: false,
        IsDisabled: false
      },
      {
      	Name: 'Voice Assistant',
        ExcludedBy: 'N/A',
        IsSelected: false,
        IsDisabled: false
      }
    ];
    
    $scope.myObj = {};
    $scope.checkAll = function(name, isSelected){
      if(name === 'N/A'){
      
        for(var i =0; i< $scope.appliances.length; i++){
        if($scope.appliances[i].Name != name && $scope.appliances[i].ExcludedBy===name){
          $scope.appliances[i].IsSelected = false;
          $scope.appliances[i].IsDisabled = !isSelected;
          }
        }
      }
    };
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox"  ng-disabled="app.IsDisabled" ng-click="checkAll(app.Name, app.IsSelected)" ng-model="app.IsSelected">
      {{ app.Name}}
    </div>
  </div>
</div>

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2018-01-30 21:10:57Z

1

In this case, DavidX's answer is correct. However, we can improve the way of verifying through the existence of the ExcludedBy attribute in a generic way using Array#find().

No necessarily, the first element of the array $scope.appliances will be N/A item.

var naItem = $scope.appliances.find(function(x) {
  return x.ExcludedBy === undefined;
});

For this example I'm using the ng-change directive.

Something like this:

First example:

var app = angular.module('MyApp', []);

app.controller('MyAppController', ['$scope',
  function($scope) {
    $scope.appliances = [{
        Name: 'N/A'
      },
      {
        Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      }
    ];

    $scope.myObj = {};
    $scope.check = function() {
      var naItem = $scope.appliances.find(function(x) {
        return x.ExcludedBy === undefined;
      });
      if ($scope.myObj[naItem.Name]) {
        $scope.myObj = {};
        $scope.myObj[naItem.Name] = true;
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
    </div>
  </div>
</div>

Second example:

var app = angular.module('MyApp', []);

app.controller('MyAppController', ['$scope',
  function($scope) {
    $scope.appliances = [{
        Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'N/A'
      }
    ];

    $scope.myObj = {};
    $scope.check = function() {
      var naItem = $scope.appliances.find(function(x) {
        return x.ExcludedBy === undefined;
      });
      if ($scope.myObj[naItem.Name]) {
        $scope.myObj = {};
        $scope.myObj[naItem.Name] = true;
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
    </div>
  </div>
</div>

edited Jan 30, 2018 at 21:10

answered Jan 30, 2018 at 19:23

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

3 Comments

user990951 Over a year ago

I just did the same thing after reading another webpage. But when you click "N/A' all of them get checked. What i need is when "N/A" all the other checkboxes are unchecked, but "N/A' remains checked.

DavidX Over a year ago

@user990951 Please take a look the other solutions using ng-change or ng-click. I believe that will give you what you want.

Danny Fardy Jhonston Bermúdez Over a year ago

@user990951 Oh I'm sorry. I just corrected my answer.

Collectives™ on Stack Overflow

Uncheck all checkboxes based on another checkbox using Angularjs

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related