AngularJs: Unable to uncheck checkbox when uncheck another checkbox

Question

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?

try if(!$scope.secondCheckbox) { $scope.firstCheckbox = false; };, dont pass the value which are there on $scope in function calls as a good practise — harishr
– harishr, Commented Nov 30, 2016 at 3:45

Divyanshu Maithani · Accepted Answer · 2016-11-30 03:55:50Z

2

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

answered Nov 30, 2016 at 3:55

Divyanshu Maithani

15.1k2 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akira Kronic Over a year ago

Thanks for your answer! @Divyanshu

Collectives™ on Stack Overflow

AngularJs: Unable to uncheck checkbox when uncheck another checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related