HTML表单无输出且返回NaN，求计算逻辑与表单问题排查

核心问题分析 #

• 重复ID与控件类型错误：多个复选框使用了同一个id="pavCAT"，HTML中ID必须唯一；且你需要的是单选逻辑，应该用type="radio"而非checkbox（复选框允许多选，同name的单选框组内只能选一个）。
• Label关联错误：label的for属性应对应输入框的ID，而非value值，否则点击标签无法选中对应控件。
• 数值解析错误：用parseInt解析小数（如0.3）会被转为0，导致计算完全错误，需用parseFloat或Number()处理带小数的数值。
• 空值处理缺失：输入框未填或未选选项时，解析空字符串会得到NaN，需要设置默认值避免异常。

修正后的代码 #

<form oninput="
  const pavValue = Number(pavVal.value) || 0;
  const catValue = parseFloat(pavCAT.value) || 0;
  retVal.value = pavValue - (pavValue * catValue);
">
  <table> 
    <tr>
      <td>
        <label for="pavVal"><b>PAV:</b></label>
      </td>
      <td>
        <input type="number" id="pavVal" value="0">
      </td>
    </tr>   
    <tr>
      <td>
        <label><b>CAT:</b></label>
      <td>
        <input type="radio" name="pavCAT" id="catN" value="0.3" checked>
        <label for="catN"> N (30%)</label>
        
        <input type="radio" name="pavCAT" id="catS" value="0.2">
        <label for="catS"> S (20%)</label>
        
        <input type="radio" name="pavCAT" id="catB" value="0.1">
        <label for="catB"> B (10%)</label>
      </td>
    </tr>
    <tr>
      <td>
        <label for="retVal"><b>Retention Value:</b></label>
      </td>
      <td>
        <output name="retVal" for="pavVal pavCAT">0</output>
      </td>
    </tr>
  </table>
</form>

关键修正说明 #

1. 将复选框改为单选框，设置相同name="pavCAT"形成单选组，同时给每个单选框分配唯一ID。
2. 修正label的for属性，使其对应单选框的ID，确保点击标签能选中控件。
3. 用Number()和parseFloat()处理数值，保留小数精度；通过|| 0设置默认值，避免空值导致NaN。
4. 给输入框和输出框设置初始值0，提升初始体验。

内容的提问来源于stack exchange，提问作者dan.robertson