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