user3844782 user3844782 - 7 days ago 6
AngularJS Question

Javascript Grouping CheckBoxes - Should act as RadioButton between the groups

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;
}
};

Answer

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>

Comments