How Do I count the selected checkbox in AngularJS?

Question

/**
 * @Summary: checkAllConnectedUser function, to create album
 * @param: index, productObj
 * @return: callback(response)
 * @Description:
 */
$scope.shardBuyerKeyIdArray = [];
$scope.countBuyer = 0;
$scope.checkAllSharedBuyer = function(isChecked) {
  if (isChecked) {
    if ($scope.selectAll) {
      $scope.selectAll = false;
    } else {
      $scope.selectAll = true;
    }
    angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
      selectedBuyer.select = $scope.selectAll;
      //IF ID WILL BE EXIST IN THE ARRAY NOT PSUH THE KEYID
      if ($scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId) == -1) {
        $scope.shardBuyerKeyIdArray.push(selectedBuyer.userTypeDto.keyId);
        $scope.countBuyer++;
      }
    });
  } else {
    $scope.selectAll = false;
    //USED FOR UNCHECK ALL THE DATA ONE- BY-ONE
    angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
      selectedBuyer.select = $scope.selectAll;
      var index = $scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId);
      $scope.shardBuyerKeyIdArray.splice(index, 1);
      $scope.countBuyer--;
    });
  }
}

<div class="checkbox w3-margin" ng-if="selectedSharedBuyerObjectList.length > 0">
  <span class="w3-right" ng-if="countBuyer">
    <h5>You are selecting {{countBuyer}} buyers!</h5>
  </span>
  <label>
    <input type="checkbox" ng-model="selectAll"  ng-click="checkAllSharedBuyer(selectAll)"/>Check All
  </label>
</div>

<div id="sharedRow" class="checkbox" ng-repeat="selectedBuyer in cmnBuyer = (selectedSharedBuyerObjectList | filter : userSearchInProduct
  | filter : filterUser)"> 
  <label>
    <input type="checkbox" ng-model="selectedBuyer.select" 
      ng-change="selectedSharedBuyer($index, selectedBuyer.select, selectedBuyer.userTypeDto.keyId)"/>
      {{selectedBuyer.personName}} 
  </label>
</div>

I have two list in which i have to count the select all checkbox length as well as single checkbox count my problem if the user un-check the ALL checkbox Checkbox count will be return -- what's the problem in my code?

Neeraj Pathak · Accepted Answer · 2017-08-02 09:00:45Z

$(function(){
var count = 0;
$('#sharedRow ').find('input[type=checkbox]').on('change',function(){
   $('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
})
$('#chkAll').on('change', function () {
    if ($(this).is(':checked')) {
        $('#sharedRow ').find('input[type=checkbox]').prop('checked', true);
        $('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
    }
    else {
        $('#sharedRow ').find('input[type=checkbox]').prop('checked', false);
        $('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
    }
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox w3-margin">
    <span class="w3-right">
        <h5 id="msg" >You are selecting 0 buyers!</h5>
    </span>
    <label>
        <input id="chkAll" type="checkbox" />Check All
    </label>
</div>

<div id="sharedRow" class="checkbox">
    <label>
        <input type="checkbox" value="1 Buyers" />1 Buyers
    </label>
    <label>
        <input type="checkbox" value="2 Buyers" />2 Buyers
    </label>
    <label>
        <input type="checkbox" value="3 Buyers" />3 Buyers
    </label>
    <label>
        <input type="checkbox" value="4 Buyers" />4 Buyers
    </label>
    <label>
        <input type="checkbox" value="5 Buyers" />5 Buyers
    </label>
    <label>
        <input type="checkbox" value="6 Buyers" />6 Buyers
    </label>
    <label>
        <input type="checkbox" value="7 Buyers" />7 Buyers
    </label>
    <label>
        <input type="checkbox" value="8 Buyers" />8 Buyers
    </label>
</div>

try this one. is it ok? if not then tell me what's wrong.

Neeraj Pathak · Accepted Answer · 2017-08-02 08:13:30Z

0

if you have a group of checkbox then you can find all selected checkbox.

$('div').find('input[type=checkbox]:checked').length;

answered Aug 2, 2017 at 8:13

Neeraj Pathak

7594 silver badges13 bronze badges

3 Comments

Neeraj Pathak Over a year ago

hi, I'm resolving this issue in jquery. if you don't mine. can I do?

Kapil Soni Over a year ago

i have tried this code and its work's for me sir thank you for your great response but sir how to implmented this functionality with AngularJS?

Neeraj Pathak Over a year ago

If you Indian read in Hinglish Bhai ab aap socho or logic build kro tvi hoga wrna kvi ni hoga

Icycool · Accepted Answer · 2017-08-02 10:12:04Z

0

If you only need the number

var count = $scope.selectedSharedBuyerObjectList.reduce(function(sum, item) {
  return (item.select) ? sum + 1 : sum;
}, 0);

If you need the filtered array

var selected = $scope.selectedSharedBuyerObjectList.filter(function(item) {
  return item.select;
});

var count = selected.length;

Or do it using plain old loop

var count = 0;

for (i = 0; i < $scope.selectedSharedBuyerObjectList.length; i++) {
  if ($scope.selectedSharedBuyerObjectList.select) count++;
}

answered Aug 2, 2017 at 10:12

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Collectives™ on Stack Overflow

How Do I count the selected checkbox in AngularJS?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related