了如何使用uncheckall一个复选框的检查复选框angularjs

Question

我有三个复选框如下：

<input type="checkbox" ng-true-value="Orange" ng-model="selectMe1">Orange 
<input type="checkbox" ng-true-value="Pink" ng-model="selectMe2">Pink 

和一个更复选框，清除所有复选框：

<input type="checkbox" ng-true-value="none" ng-model="clearMe">None 

谢谢你前进..

Answer 1

<input type="checkbox" ng-true-value="none" ng-click="clearAll()" ng-model="clearMe"> 

Javascript代码

$scope.clearAll=function(){ 
    $scope.selectMe1=false; 
    $scope.selectMe2=false; 

} 

Answer 2

这些链接可能对您有帮助：

http://www.w3schools.com/angular/ng_ng-checked.asp

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-checked

Answer 3

在ng-click一个toggle功能应该可以帮助您。尝试这个。

<input type="checkbox" ng-true-value="0" ng-model="clearMe" ng-click="toggle()">None 

在你的控制器，你可以添加

$scope.toggle = function() 
{ 
    $scope.selectMe1 = 'false'; 
    $scope.selectMe2 = 'false'; 
} 

Answer 4

这是一个样本，可以帮助你：

的Html

<div> 
    <ul ng-controller="checkboxController"> 
     <li>Check All 
      <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /> 
     </li> 
     <li ng-repeat="item in Items"> 
      <label>{{item.Name}} 
       <input type="checkbox" ng-model="item.Selected" /> 
      </label> 
     </li> 
    </ul> 
</div> 

的Javascript

angular.module("CheckAllModule", []) 
    .controller("checkboxController", function checkboxController($scope) { 


    $scope.Items = [{ 
     Name: "Item one" 
    }, { 
     Name: "Item two" 
    }, { 
     Name: "Item three" 
    }]; 
    $scope.checkAll = function() { 
     if ($scope.selectedAll) { 
      $scope.selectedAll = true; 
     } else { 
      $scope.selectedAll = false; 
     } 
     angular.forEach($scope.Items, function (item) { 
      item.Selected = $scope.selectedAll; 
     }); 

    }; 


}); 

this a working demo

Answer 5

您最后复选框ng-change=disableall()添加到这一点你最后的复选框，

控制器上：

$scope.selectMe1 = false;//init 
$scope.selectMe2 = false;//init 
$scope.clearMe = false;//init 

$scope.disableall() = function(){ 
    //let's say that you clear when the checkbox is true 
    if($scope.clearMe){ 
      $scope.selectMe1 = false; 
      $scope.selectMe2 = false;   
    } 
} 

希望有所帮助，祝你好运。

Answer 6

简单的解决方案：

<input type="checkbox" ng-model="selectMe1">Orange 
<input type="checkbox" ng-model="selectMe2">Pink 

<input type="checkbox" ng-model="clearMe" ng-click="selectMe1=selectMe2=0;">None 

Answer 7

try this, 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> </script> 
<div ng-app="app" ng-controller="ctrl"> 
<form id="selectionForm"> 
    <input type="checkbox" ng-click="toggleAll()" >Select all 
    <br> 
    <div ng-repeat = "option in options"> 
     <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}} 
    </div> 
</form> 
    {{options}} 
</div> 

<script> 
angular.module("app", []).controller("ctrl", function($scope){ 

    $scope.options = [ 
    {value:'Option1', selected:true}, 
    {value:'Option2', selected:false} 
    ]; 

    $scope.toggleAll = function() { 
    var toggleStatus = false; 
    angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; }); 

    } 

}); 
</script>