Problem checking all checkboxes

Asked

Viewed 1,079 times

4

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

3 answers

4

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.

  • Wagner, it’s still the same.

  • Wagner, unfortunately it didn’t work !

  • How are the checkboxes that will be checked/unchecked? put their code there to see.

  • Wagner, I edited the codes again below the question, as you requested.

  • Put an id in the checkbox so id="checkParticipants", then in the script change to $('#checkParticipants'). prop( "checked", false ); and $('#checkParticipantes'). prop( "checked", true);

4


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

4

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.

  • 1

    I agree with Onosendai! Always better to use only Angular (or other framework), as well as when using jQuery, try to make the most of all resources and not use pure JS.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.