AngularJs:取消选中另一个复选框时无法取消选中复选框

时间:2016-11-30 03:41:08

标签: angularjs checkbox ionic-framework

遇到问题,这里的情况:
当我取消选中第二个复选框时,我想取消选中第一个复选框。

假设默认情况下都会选中两个复选框。当我点击第二个复选框时,我想要取消选中第一个复选框。

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


$scope.firstCheckbox变为false,但在HTML中仍未取消选中。
我可以知道问题出在哪里吗?

1 个答案:

答案 0 :(得分:2)

您尝试访问secondCheckbox.checked属性,但secondCheckbox已经false。您应该只检查secondCheckbox false值。请使用if(!secondCheckbox)代替条件。

Here是您的代码的一个工作小提琴。

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