JS获取Thymeleaf循环渲染input值求和仅首个元素生效问题

• id属性重复：HTML标准要求页面中所有元素的id全局唯一，你在th:each循环中给每一行的age输入框都写死了id="age"，jQuery的ID选择器$("#age")只会命中DOM里第一个带该id的元素，后续循环生成的输入框完全不会被选中，自然无法参与求和。
• 总计输入框赋值方法错误：id为sum的元素是<input>表单控件，.html()方法只能修改普通DOM节点的内部文本，无法设置输入框的显示值，需要用.val()方法才能正确赋值。
• 冗余逻辑问题：原代码在页面加载时循环给输入框绑定事件的写法，不仅因为id选不到后续元素导致绑定失效，还存在局部变量作用域错误——console.log处的sum是calculateSum函数内的局部变量，外层根本访问不到。

1. 调整HTML结构 #

去掉重复写死的id="age"，给age输入框加专属类名用于选择，避免id冲突：

<tr th:each="person : ${persons}">
    <td th:text="${person.first_name}"></td>
    <td th:text="${person.last_name}"></td>
    <td th:text="${person.phone}"></td>
    <td>
        <input class="form-control age-input" type="text" name="age" th:field="*{ages}">
    </td>
</tr>

Total : <input type="text" name="sum" id="sum" readonly>

给sum输入框加readonly属性可以避免用户手动修改总计值。

2. 修正JS逻辑 #

用类选择器选中所有age输入框，用事件委托绑定输入事件，赋值时改用.val()方法：

<script type="text/javascript">
$(function(){
    // 给所有age输入框绑定input事件，类选择器不会漏选元素
    $(document).on('input', '.age-input', function(){
        calculateSum();
    });
    // 页面加载完成先计算一次初始值
    calculateSum();
});

function calculateSum() {
    var sum = 0;
    // 遍历所有age输入框累加有效值
    $(".age-input").each(function() {
        const value = $(this).val().trim();
        if(!isNaN(value) && value.length !== 0) {
            sum += parseFloat(value);
        }
    });
    // 表单输入框用val()方法赋值
    $("#sum").val(sum.toFixed(2));
}
</script>

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