javascript - 查找表单中选中的复选框数量，结果是实际数量的两倍

Question

我正在尝试计算表单中选中/选择的联系人复选框的数量。下面的代码片段可能有什么问题，它实际上给出了双倍的计数。

HTML:

<div ng-hide ="onOff">
<span class="ctCheckBox" ng-class="{'searchDataCheckbox':searchView}">
<label class="atl-check-box-label">
<input type="checkbox" class="atl-check-box" ng-checked="iscontactChecked(info.userId)" ng-click ="grpAct()">
<span class="fntIcons appFtIcns"></span>
</label>
</span>
</div>
<div ng-hide ="!onOff">
<span class="ctCheckBox" ng-class="{'searchDataCheckbox':searchView}">
<label class="atl-check-box-label">
<input type="checkbox" class="atl-check-box" ng-checked="iscontactChecked(info.userId)" ng-click ="grpAct()">
<span class="fntIcons appFtIcns"></span>
</label>
</span>
</div>

HTML 表单是一个巨大的表单，它同时具有 <span class="ctCheckBox" ..和<input type="checkbox" class="atl-check-box" ..其他地方也有。但是，应用程序 View 上仅显示上述 HTML 代码。

JS:

$scope.selectedContactsCount = angular.element('.ctCheckBox input:checked').length;
alert('1st alert: ' +$('input:checkbox:checked').length);
alert('2nd alert: ' +$('.atl-check-box input:checked').length);

以上 3 个 JS 语句都会产生错误数量的选定复选框:

1. 第一个给出的复选框数量是实际选中的复选框数量的两倍
2. 对于第二个，计数为 27
3. 对于第三个，计数为 0

例如:如果仅选择了应用程序 View 上显示的 2 个联系人，则所选联系人的数量显示为 4，如果选择了 3 个联系人，则显示的联系人数量为 6所选联系人的数量等等。

我错过了什么吗？

非常感谢任何帮助，提前致谢!

Answer 1

我已经找到了问题的解决方案。计数增加一倍的真正原因是由于使用了 ng-hide 而不是 ng-if，后者会在 DOM 中显示选定的联系人被隐藏或显示并导致 angular.element('.ctCheckBox input:checked').length 找到同一复选框的 2 次出现(重复)。ng-if 现在已经解决了这个问题，因为复选框在 DOM 上有条件地呈现，但是，应用程序初始加载联系人列表的行为还有一些其他变化，我们将对此进行研究。