实现数量、固定值、结果输入框双向数值自动联动更新的方案问询

实现方案 #

只需新增对结果字段#tiles的输入事件监听，触发反向计算即可，同时补充数值合法性校验避免异常。完整调整后的代码如下：

// 正向逻辑：修改数量/固定值时自动更新结果
$("#input2,#Quantity").on('keyup change', function () {
    const quantity = parseFloat($('#Quantity').val()) || 0;
    const fixedVal = parseFloat($('#input2').val()) || 0;
    $('#tiles').val((quantity * fixedVal).toFixed(2));
});

// 反向逻辑：修改结果时自动更新数量
$("#tiles").on('keyup change', function () {
    const resultVal = parseFloat($(this).val()) || 0;
    const fixedVal = parseFloat($('#input2').val()) || 0;
    // 规避固定值为0时的除法报错
    if (fixedVal === 0) return;
    const newQuantity = (resultVal / fixedVal).toFixed(2);
    // 适配数量输入框最小为1的限制
    $('#Quantity').val(Math.max(newQuantity, 1));
});

优化说明 #

• 新增parseFloat强制转换数值类型，避免字符串拼接导致的计算错误，兜底默认值0防止出现NaN
• toFixed(2)对齐数量输入框step="0.01"的精度要求
• 增加固定值为0的判断，避免控制台抛出除法异常
• 反向计算后通过Math.max保证数量值不小于原输入框的min="1"限制，符合原始属性规则

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