如何统计带值input总数及值为A的input数量？

需求 #

• 统计所有带有非空值（值为A或X均可）的<input>元素总数
• 统计值严格等于A的<input>元素数量
• 结果以[A的数量] of [带值总数] items格式展示

完整可运行代码 #

JavaScript

// 统计所有带非空值的input
const totalFilled = $(".col input").filter(function() {
  return !!this.value.trim(); // 过滤掉空白值的情况
}).length;

// 统计值为"A"的input
const countA = $(".col input").filter(function() {
  return this.value.trim() === "A";
}).length;

// 将结果写入页面
$(".results").text(`${countA} of ${totalFilled} items`);

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>

核心调整说明 #

1. 修复选择器错误：原代码中使用.result选择结果容器，但HTML中实际类名为.results，已修正
2. 增强鲁棒性：加入trim()处理，避免输入框包含空白字符时被误判为有效输入
3. 新增A值统计逻辑：通过filter方法精确匹配值为A的输入框
4. 简化渲染逻辑：直接使用jQuery的text()方法将格式化后的结果写入容器，替代原生DOM遍历

示例结果 #

基于提供的HTML结构，最终页面会显示：6 of 11 items

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