如何获取页面中隐藏、非隐藏及已勾选非隐藏Checkbox的数量？

原代码的问题在于使用了错误的属性选择器：HTML的布尔属性（如hidden）只要存在，无论属性值设为true还是false，浏览器都会判定元素处于隐藏状态，因此input[hidden=false]无法正确筛选出非隐藏的复选框。以下是正确的实现方式：

原生JavaScript实现 #

1. 隐藏的Checkbox数量 #

// 方式1：筛选带有hidden属性的复选框（无论属性值）
const hiddenCheckboxCount = document.querySelectorAll('input[type="checkbox"][hidden]').length;
console.log('隐藏的Checkbox数量:', hiddenCheckboxCount);

// 方式2：精确判断元素hidden属性为true
const hiddenCheckboxCountExact = Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter(box => box.hidden === true).length;
console.log('隐藏的Checkbox数量:', hiddenCheckboxCountExact);

2. 非隐藏的Checkbox数量 #

// 方式1：筛选不带hidden属性的复选框
const visibleCheckboxCount = document.querySelectorAll('input[type="checkbox"]:not([hidden])').length;
console.log('非隐藏的Checkbox数量:', visibleCheckboxCount);

// 方式2：精确判断元素hidden属性为false
const visibleCheckboxCountExact = Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter(box => box.hidden === false).length;
console.log('非隐藏的Checkbox数量:', visibleCheckboxCountExact);

3. 已勾选的非隐藏Checkbox数量 #

// 方式1：结合属性选择器直接筛选
const checkedVisibleCount = document.querySelectorAll('input[type="checkbox"]:not([hidden]):checked').length;
console.log('已勾选的非隐藏Checkbox数量:', checkedVisibleCount);

// 方式2：通过数组筛选精确匹配
const checkedVisibleCountExact = Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter(box => box.hidden === false && box.checked === true).length;
console.log('已勾选的非隐藏Checkbox数量:', checkedVisibleCountExact);

jQuery实现 #

如果使用jQuery，代码会更简洁：

// 隐藏的Checkbox数量
const hiddenCount = $('input[type="checkbox"][hidden]').length;
console.log('隐藏的Checkbox数量:', hiddenCount);

// 非隐藏的Checkbox数量
const visibleCount = $('input[type="checkbox"]:not([hidden])').length;
console.log('非隐藏的Checkbox数量:', visibleCount);

// 已勾选的非隐藏Checkbox数量
const checkedVisibleCount = $('input[type="checkbox"]:not([hidden]):checked').length;
console.log('已勾选的非隐藏Checkbox数量:', checkedVisibleCount);

内容的提问来源于stack exchange，提问作者Risli Azis