Array of checkboxes with group uncheck

Question

The following form has got 3 radio buttons and 5 check boxes in an array. Radio1 shows CB1 , Radio2 shows CB2,CB3 and CB4, and finally Radio3 shows CB5. I want to uncheck the checkbox when i select a checkbox from another group. That is if CB1 is selected first and if i click any of the other check boxes from the other 2 groups, CB1 should be unchecked. I did like below, but it not working properly.

HTML

    <form>

        <label class="radio-inline" >

        <input value="1" type="radio" ng-model="radioM" >Main1</label>

        <label class="radio-inline">

        <input value="2" type="radio" ng-model="radioM" >Main2</label>

        <label class="radio-inline">

        <input value="3" type="radio" ng-model="radioM" >Main3</label>

        <div class="">

        <label ng-repeat="branch in branches" >

        <input  type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 

                ng-model="branch.selected" ng-click="unChecker()"  >{{branch.name}}

        </label></div> 

        </form>

Controller

$scope.branches= [ { name: 'B1', selected: false, value: '1'},

                   { name: 'B2', selected: false, value: '2'},

                   { name: 'B3', selected: false, value: '3'},

                   { name: 'B4', selected: false, value: '4'}

                   { name: 'B5', selected: false, value: '5'}

                  ];

$scope.unChecker = function () {

         if( $scope.branches[0].selected==true) {

         $scope.branches[1].selected=false;

         $scope.branches[2].selected=false;

         $scope.branches[3].selected=false;

         $scope.branches[4].selected=false;

          }

         if $scope.branches[1].selected==true || $scope.branches[2].selected ==true

                        || $scope.branches[3].selected==true){

         $scope.branches[0].selected=false;

         $scope.branches[4].selected=false;

       }

         if( $scope.branches[4].selected==true) {

          $scope.branches[0].selected=false;

          $scope.branches[1].selected=false;

          $scope.branches[2].selected=false;

          $scope.branches[3].selected=false;

         }

};

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I have modified the code as you expect.

Note: I haven't done anything with the radio buttons as you didn't ask anything.

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

app.controller('CheckBoxController', function($scope) {
  $scope.branches = [ 
   { name: 'B1', selected: false, value: '1', group: 'A'},
                   { name: 'B2', selected: false, value: '2', group: 'B'},
                   { name: 'B3', selected: false, value: '3', group: 'B'},
                   { name: 'B4', selected: false, value: '4', group: 'B'},
                   { name: 'B5', selected: false, value: '5', group: 'C'}
                  ];
  
$scope.unChecker = function (index) {
   var group = $scope.branches[index].group;
   angular.forEach($scope.branches, function(obj, i){
     if(obj.group !== group) {
       obj.selected = false;
     }
   });
}; 

});

angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-controller="CheckBoxController">
        <label class="radio-inline" >
        <input value="1" type="radio" ng-model="radioM" >Main1</label>
        <label class="radio-inline">
        <input value="2" type="radio" ng-model="radioM" >Main2</label>
        <label class="radio-inline">
        <input value="3" type="radio" ng-model="radioM" >Main3</label>
        <div class="">
        <label ng-repeat="branch in branches" >
        <input  type="checkbox" name="selectedBranches{{$index}}" value="{{branch.value}}" 
                ng-model="branch.selected" ng-change="unChecker($index)"  >{{branch.name}}
        </label></div> 
        </form>

Array of checkboxes with group uncheck

Sign up