javascript - 如何计算 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>

我有两个列表，其中我必须计算选择所有复选框的长度以及单个复选框的数量，如果用户取消选中所有复选框，复选框数量将返回，我的问题是 - 我的代码有什么问题？

Answer 1

$(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>

试试这个。可以吗？如果没有，请告诉我出了什么问题。