动态生成lightning-input进度条百分比计算：复选框计数异常排查

核心问题原因 #

复选框类型的lightning-input，其value属性默认是空字符串，勾选状态不会改变这个值，而是通过checked属性标识是否选中。你之前的代码仅判断value !== ''，所以复选框即使勾选也不会被统计。

修正后的代码 #

JavaScript逻辑 #

handleInputValueChanged() {
  const inputs = [...this.template.querySelectorAll('lightning-input')];
  let count = inputs.reduce((total, input) => {
    // 按字段类型分别判断是否完成填写/勾选
    if (input.type === 'checkbox') {
      return total + (input.checked ? 1 : 0);
    } else {
      // 文本类字段去掉首尾空格后判断是否非空
      return total + (input.value.trim() !== '' ? 1 : 0);
    }
  }, 0);
  // 用动态获取的字段总数计算进度，适配API返回的任意字段数量
  const progress = ((count / inputs.length) * 100).toFixed(0);
  // 此处可将progress赋值给变量用于页面展示进度
}

模板部分（统一事件绑定） #

<template>
  <lightning-input type="checkbox" label="是否同意" onchange={handleInputValueChanged}></lightning-input>
  <lightning-input type="text" label="输入内容" onchange={handleInputValueChanged}></lightning-input>
</template>

关键优化点 #

• 动态字段场景下，通过input.type区分字段类型，无需依赖字段名称
• 文本类字段增加trim()处理，避免空格被误判为已填写
• 复选框直接判断checked属性，准确识别勾选状态
• 用inputs.length替代固定的2，自动适配API返回的任意数量字段

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