Quzaimer Quzaimer - 10 days ago 9
AngularJS Question

AngularJs: Unable to uncheck checkbox when uncheck another checkbox

Got a problem, here the situation:

I want to uncheck the first checkbox when I uncheck the second checkbox.


Let say, by default both checkbox are checked. When I click second checkbox, I want the first checkbox to uncheck also.

HTML:

<ion-checkbox ng-model="firstCheckbox">First Checkbox</ion-checkbox>
<ion-checkbox ng-model="secondCheckbox" ng-change="uncheckFirstCheckbox(secondCheckbox)">Second Checkbox</ion-checkbox>




JS:

$scope.uncheckFirstCheckbox = function(secondCheckbox) {
if(secondCheckbox.checked === false) {
$scope.firstCheckbox = false;
};
};




The
$scope.firstCheckbox
turn false but it remain uncheck in HTML.

May I know where could be the problem?

Answer

You're trying to access secondCheckbox.checked property but secondCheckbox is already false. You should be only checking secondCheckbox for a false value. Use if(!secondCheckbox) instead for the condition.

Here is a working fiddle of your code.

HTML

<ion-checkbox ng-model="firstCheckbox">First Checkbox</ion-checkbox>
<ion-checkbox ng-model="secondCheckbox" ng-change="uncheckFirstCheckbox(secondCheckbox)">Second Checkbox</ion-checkbox>

JS

$scope.uncheckFirstCheckbox = function(secondCheckbox) {
    if (!secondCheckbox) {
        $scope.firstCheckbox = false;
    };
};