如何计算AngularJS中的选中复选框？

/** 
 
* @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>

我有两个列表中，我都数不过来选择所有复选框长度以及单个复选框算我的问题，如果用户取消选中复选框的所有复选框计数将回归 - 我的代码有什么问题？

来源

2017-08-02 kapil soni

如果你有一组复选框，那么你可以找到所有选中的复选框。

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

来源

2017-08-02 08:13:30

好的先生，我会尝试一下，但先生我的代码上面有可能吗？ –

让我看看你的UI意味着HTML等 –

先生检查我的HTML代码，我已更新。 –

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

试试这个。可以吗？如果没有，那么告诉我什么是错的。

来源

2017-08-02 09:00:45

谢谢先生，我会试试这段代码 –

如果你只需要数

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

如果您需要过滤的阵列

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

var count = selected.length;

还是你使用普通的旧环

var count = 0; 

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

来源

2017-08-02 10:12:04 Icycool

如何计算AngularJS中的选中复选框？

回答

相关问题