PHP循环内用jQuery限制输入框值不超100的问题排查

问题根源 #

HTML规范中id属性必须唯一，你循环生成的所有分数输入框都使用了id="score"，导致jQuery的$("#score")只会选中页面中第一个匹配该id的元素，因此只有第一个输入框的验证逻辑生效。

修正方案 #

1. 修改PHP代码（修复id重复+优化表单提交） #

将分数输入框的id替换为统一的class，同时把name改为数组形式（方便后端接收所有分数值），并修正原代码中的语法错误：

while ($row = mysqli_fetch_array($query)) {
    echo "<label>Name</label>
    <input type='text' class='form-control' name='name[]' value='".$row['name']."' />";
    echo "<label>Score</label>
    <input type='text' class='form-control score-input' name='score[]' value='' />";
}

• 新增score-input类，用于统一绑定验证事件
• name="score[]"：循环生成的多个输入框会以数组形式提交到后端，避免只获取最后一个输入值的问题

2. 修改JavaScript代码（绑定所有输入框的事件） #

使用类选择器绑定keyup事件，通过$(this)指代当前触发事件的输入框，同时优化数值判断逻辑（避免字符串比较误差）：

$(document).ready(function(){
    $(".score-input").keyup(function(){
        var score = parseInt($(this).val(), 10);
        // 仅当输入为有效数字且超过100时触发提示
        if (!isNaN(score) && score > 100) {
            alert("Score cannot be greater than 100");
            $(this).val("");
        }
    });
});

• $(".score-input")：选中所有带该类的输入框，绑定事件
• parseInt(..., 10)：将输入值转为十进制整数，避免字符串比较的错误（比如"101"字符串和"100"比较会出现不符合预期的结果）
• !isNaN(score)：过滤非数字输入，避免无效值触发提示

额外优化（可选） #

可以将分数输入框改为type="number"，配合原生属性限制输入范围，实现双重验证：

<input type="number" class="form-control score-input" name="score[]" min="0" max="100" value="" />

这样浏览器会直接限制用户输入超过100的数字，同时保留JS验证作为兜底，提升用户体验。

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