Problem checking all checkboxes

Question

How do I check input’s checkbox? You’re just unchecking.

Follow the codes for assistance:

HTML

<div class="col-md-11">
<div style="text-align: right;" class="checkbox">
<label><input type="checkbox" ng-click="marcarDesmarcarTodos('checkParticipantes')" id="ckeckAll" name="checkAll" />Marcar/Desmarcar Todos</label>
</div>
</div>

<input type="checkbox" name="checkParticipantes" ng-click="ckeckMarcarDesmarcarTodos()" ng-model="participante.selecionados[pessoa.ID_PESSOA_EVENTO]" />

Javascript - Angularjs

$scope.ckeckMarcarDesmarcarTodos = function () {
        if( $('#ckeckAll').is(':checked')) {
            $('#ckeckAll').prop("checked", false);
        }else {
            $('#checkAll').prop("checked", true);
        }
    };        

$scope.selectedAll = false;
$scope.marcarDesmarcarTodos = function ()
{
    $scope.selectedAll = !$scope.selectedAll;
    if ($scope.selectedAll) {
        $scope.participante.selecionados = {};
        angular.forEach($scope.participante, function (item) {
            $scope.participante.selecionados[item.idPessoaEvento] = $scope.selectedAll;
        });
    } else {
        $scope.participante.selecionados = {};
    }
};

Answer 1

Do so:

$scope.ckeckMarcarDesmarcarTodos = function () { 
     if( $('#ckeckAll').is(':checked') ) {
           $('#ckeckAll').prop( "checked", false );
     } else {
           $('#ckeckAll').prop( "checked", true);
     }
};

Only one Lse was missing to check the checkbox, I also changed the removeAttr for prop, which is more suitable.

Answer 2

Save the current value in a variable:

• var isChecked = $('#ckeckAll').is(':checked');

And "reverse" the value of checked

• $('#ckeckAll').prop('checked', !isChecked);

If checked, will change to not checked and vice versa.

$scope.ckeckMarcarDesmarcarTodos = function () {
  var isChecked = $('#ckeckAll').is(':checked');
  $('#ckeckAll').prop('checked', !isChecked);
};

Answer 3

A purely Angular solution (without jQuery):

angular.module('myApp', [])
.controller('myController', function($scope){
  $scope.selected = {};

  $scope.items = ['Item 1','Item 2','Item 3','Item 4']; 

  $scope.checkAll = function(){
    angular.forEach($scope.items, function(i){
      $scope.selected[i] = true;
    });
  };
  
  $scope.checkNone = function(){
    $scope.selected = {};
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
    <div ng-repeat="i in items">
      <input type="checkbox" ng-model="selected[i]" ng-false-value="" />{{i}}
    </div>
<br/>
    <a href="#" ng-click="checkAll()">Marcar Todos</a><br/>
    <a href="#" ng-click="checkNone()">Desmarcar Todos</a>

    <pre>{{selected|json}}</pre>
  </div>
</div>

The use of jQuery code in conjunction with Angular is generally not recommended because execution takes place off the cycle Digest of the Angular, which can break the 2-way Binding.