Javascript 在表单中查找选中复选框的数量会使实际计数加倍

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

HTML:

以上3条JS语句都产生了错误数量的选中复选框：

第一个为实际选中复选框计数的两倍

第二个数字是27

对于第三个，计数为0

例如：如果只选择了应用程序视图上显示的2个联系人，则4显示为所选联系人数，如果选择了3个联系人，则6显示为所选联系人数，依此类推

我错过什么了吗

---

非常感谢您的帮助，提前谢谢

我找到了解决问题的办法。计数增加一倍的真正原因是使用了

ng hide

，而不是

ng if

，这将在DOM中显示选定的联系人，尽管这些联系人被隐藏或显示，并导致

angular.element（'.ctCheckBox input:checked'）。length

查找两个匹配项（重复项）相同的复选框。

---

ng如果

现在已经解决了这个问题，因为复选框在DOM上有条件地呈现，但是，在应用程序对联系人列表行为的初始加载中还有一些其他的变化，我们将对此进行研究。

我已经找到了解决问题的方法。计数增加一倍的真正原因是使用了

ng hide

，而不是

ng if

，这将在DOM中显示选定的联系人，尽管这些联系人被隐藏或显示，并导致

angular.element（'.ctCheckBox input:checked'）。length

查找两个匹配项（重复项）相同的复选框。

---

ng如果

现在已经解决了这个问题，因为复选框在DOM上被有条件地呈现，但是，在应用程序对联系人列表行为的初始加载中还有一些其他的变化，这将被研究。

那么，与选择器匹配的元素比您想象的要多。第二个示例不应该返回任何内容？@adeneo，谢谢您的快速响应。我编辑了我的问题，提到HTML表单在其他地方也有这些具有相同跨度的复选框和输入复选框类名，但在应用程序视图中，只显示了这些复选框。更正了我上面查询中的第二个JS语句。如何找出与选择器匹配的更多元素并更正计数以显示正确的值？如果有更多元素与选择器匹配，则必须使选择器更具体，例如，通过向父项添加IDspan@NathanBarkan您能否提供一个简单的示例，比如JSFIDLE，根据提供的数据，很难找到问题！，现在，您可以执行

console.log（$（'input:checkbox:checked'））

并检查控制台窗口内的HTML中实际选择了哪些元素，这必须是adeneo建议的！然后，与选择器匹配的元素比您认为的要多。第二个示例不应该返回任何内容？@adeneo，谢谢您的快速响应。我编辑了我的问题，提到HTML表单在其他地方也有这些具有相同跨度的复选框和输入复选框类名，但在应用程序视图中，只显示了这些复选框。更正了我上面查询中的第二个JS语句。如何找出与选择器匹配的更多元素并更正计数以显示正确的值？如果有更多元素与选择器匹配，则必须使选择器更具体，例如，通过向父项添加IDspan@NathanBarkan您能否提供一个简单的示例，比如JSFIDLE，根据提供的数据，很难找到问题！，现在，您可以执行

console.log（$（'input:checkbox:checked'））

并检查控制台窗口内的HTML中实际选择了哪些元素，这必须是adeneo建议的！

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

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