Akira Kronic
Akira Kronic

Reputation: 164

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?

Upvotes: 1

Views: 1858

Answers (1)

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

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

Upvotes: 2

Related Questions