jQuery动态乘法功能实现：主输入框联动子输入框数值计算求助

原代码核心问题 #

• 未遍历所有类为input__bom的子输入框，仅取第一个匹配元素的inputid属性，其他子输入框永远不会同步更新
• 未持久化子输入框的默认值，直接用.val()取值时会取到用户修改后的当前值，不符合“按自身初始默认值计算”的需求
• NaN判断逻辑完全错误：直接对比jQuery对象和字符串'Nan'，永远无法匹配，兜底逻辑不会触发
• 变量未加let/const声明，会挂载到全局作用域，容易引发脚本冲突

实现逻辑说明 #

1. 页面初始化时，遍历所有input__bom元素，将其初始值存入data-default自定义属性，避免后续修改导致默认值丢失
2. 同时监听#mainInput的keyup和input事件，适配键盘输入、粘贴、拖拽输入等所有输入场景
3. 每次主输入框值变化时，遍历所有input__bom元素逐个计算：
   • 取当前子输入框的data-default默认值
   • 取主输入框的当前输入值并转为Number类型
   • 两者相乘得到计算结果，判断是否为NaN：
     • 不是NaN则直接赋值给当前子输入框
     • 是NaN则执行预设兜底逻辑（示例沿用原需求的默认值*3规则，可自行替换）

完整可运行代码 #

<!-- 需先引入jQuery，按项目实际路径引入即可 -->
<input id="mainInput" type="text" placeholder="Number" />
<br><br>
<input class="input__bom" id="daughterInput_1" type="text" placeholder="value" inputid="1" value="5" /><br/>
<input class="input__bom" id="daughterInput_2" type="text" placeholder="value" inputid="2" value="10" /><br/>
<input class="input__bom" id="daughterInput_3" type="text" placeholder="value" inputid="3" value="15" /><br/>
<input class="input__bom" id="daughterInput_4" type="text" placeholder="value" inputid="4" value="20" /><br/>
<input class="input__bom" id="daughterInput_5" type="text" placeholder="value" inputid="5" value="25" /><br/>

<script>
// 页面DOM加载完成后执行初始化逻辑
$(function() {
  // 持久化所有子输入框的初始默认值
  $("input.input__bom").each(function() {
    const $bom = $(this);
    $bom.data('default', Number($bom.val()));
  });

  // 监听主输入框的所有输入场景
  $(document).on('keyup input', '#mainInput', function() {
    const mainInputVal = Number($(this).val().trim());
    // 遍历更新所有子输入框
    $("input.input__bom").each(function() {
      const $bom = $(this);
      const defaultVal = $bom.data('default');
      const calcResult = defaultVal * mainInputVal;
      // 校验计算结果是否为有效数字
      if (Number.isNaN(calcResult)) {
        // 此处可替换为任意预设兜底逻辑，示例为默认值*3
        $bom.val(defaultVal * 3);
      } else {
        $bom.val(calcResult);
      }
    });
  });
});
</script>

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