如何切换不同的复选框角

我有四个复选框每点击一个复选框启动不同的功能。选中其中一个复选框应取消选中所有其他复选框。我有下面的代码，但问题是我不能切换检查没有先手动删除复选标记，然后选择另一个。我的代码：如何切换不同的复选框角

$scope.checkbox = function(key){ 
     if($scope.checkbox1 === true){ 
      $scope.checkbox2 = false 
      $scope.checkbox3 = false 
      $scope.checkbox4 = false 
      $scope.checkboxValue = 'checkbox one was clicked' 
      callfunctionOne() 
     } else if($scope.checkbox2 === true){ 
      $scope.checkbox1 = false 
      $scope.checkbox3 = false 
      $scope.checkbox4 = false 
      $scope.checkboxValue = 'checkbox two was clicked' 
      callfunctiontwo() 
     } else if($scope.checkbox3 === true){ 
      $scope.checkbox1 = false 
      $scope.checkbox2 = false 
      $scope.checkbox4 = false 
      $scope.checkboxValue = 'checkbox three was clicked' 
      callfunctionthree() 
     } else if($scope.checkbox4 === true){ 
      $scope.checkbox1 = false 
      $scope.checkbox2 = false 
      $scope.checkbox3 = false 
      $scope.checkboxValue = 'checkbox Four was clicked' 

     callfunctionFour() 
     } 

     }

Plunker

来源

2016-09-15 Imi

因为你可以使用单选按钮 – Rakeschand

$scope.checkbox = function(key){ 
    $scope.checkbox1 = false 
    $scope.checkbox2 = false 
    $scope.checkbox3 = false 
    $scope.checkbox4 = false 
    $scope[key] = true; 
    $scope.checkboxValue = 'checkbox '+key+' was clicked' 
}

您应该考虑使用单选按钮但是这个代码可以让你做你想做的。

来源

2016-09-15 10:38:11 taguenizy

非常感谢这真的很有帮助，但是如果我想在每次一个条件为真时调用seprate函数，我该怎么做？ – Imi

@lmi我会改变你想要的函数的'ng-change'，只需在其中调用'$ scope.checkbox（key）'或者在'$ scope.checkbox'函数内执行'switch'。这真的取决于你，但如果你有任何问题只是更新plunker – taguenizy

您可以使用此方法为您的代码：为ng-model所有复选框

使用一个共同的变量，
，然后用ng-true-value用于识别选中该复选框

例如：Plunker

<!-- AngularJS Code --> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.setValues = function(){ 
    $scope.checkbox1 = false; 
    $scope.checkbox2 = false; 
    $scope.checkbox3 = false; 
    $scope.checkbox4 = false; 

    $scope['checkbox'+tempVariable] = true; 
    }; 
}); 
</script> 

<!-- HTML Code --> 
<label class="label--checkbox " id="checkbox1"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="1"> 
    <span class="checkboxLabelText"> 
    Checkbox 1 : {{checkbox1}} 
    </span> 
</label> 

<label class="label--checkbox" id="checkbox2"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="2"> 
    <span class="checkboxLabelText"> 
    Checkbox 2 : {{checkbox2}} 
    </span> 
</label> 

<label class="label--checkbox" id="checkbox3"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="3"> 
    <span class="checkboxLabelText"> 
    Checkbox 3 : {{checkbox3}} 
    </span> 
</label> 

<label class="label--checkbox" id="checkbox4"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="4"> 
    <span class="checkboxLabelText"> 
    Checkbox 4 : {{checkbox4}} 
    </span> 
</label>

来源

2016-09-15 10:46:21

我假设你得到所需答案，但这里是为Multi checkbox一个不错的自定义指令，可处理大部分的情况。

来源

2016-09-15 13:25:09

太棒了！谢谢你是对的，我已经得到了答案，但这对未来会很有帮助 – Imi

如何切换不同的复选框角

回答

相关问题