ASP.NET MVC(C#)如何根据复选框勾选状态自动计算文本框值

你的代码存在5个核心错误，直接导致功能异常：

• 重复ID冲突：循环渲染时给每一行的新库存文本框设置了固定IDnsq，HTML规范要求页面ID全局唯一，jQuery选择器$('#nsq')永远只会匹配到页面第一个同ID元素，这是只有第一行能触发赋值的核心原因。
• JS函数重复覆盖：你把newQuantity函数写在了@foreach循环内部，每渲染一行商品就会重新定义一次同名函数，最终页面中生效的永远是最后一次渲染时定义的函数版本，其余行点击复选框时调用的逻辑和当前行数据完全不匹配。
• 逻辑分支缺失：现有函数仅处理了复选框勾选的分支，完全没有编写取消勾选时清空对应文本框的逻辑。
• 取值逻辑错误：你把Razor服务端渲染的固定值@item.Qty_Ordered.Value、@item.Qty_Available.Value直接写在循环内的JS函数中，遍历所有复选框时根本无法动态获取对应行的真实订购量、可用库存数值。
• 冗余遍历逻辑：函数内遍历全页面所有复选框的逻辑完全没有必要，你已经在内联事件中传入了代表当前点击元素的this对象，完全可以直接基于当前元素定位同行控件，不需要全局遍历。

第一步：修改视图循环渲染代码 #

移除重复ID，移除内联onclick绑定，将计算需要的数值存储在DOM的data属性上，不要在循环内部编写script标签，调整后的表格循环代码如下：

<table class="table">
<tr>
    <th>Order #</th>
    <th>Product Code</th>
    <th>Qty Ordered</th>
    <th>Qty Available</th>
    <th>Qty Returned</th>
    <th>Return?</th>
    <th>New Qty Available</th>
</tr>
@foreach (var item in Model)
{
<tr>
    <td>@Html.DisplayFor(modelitem => item.OrderID)</td>
    <td>@Html.DisplayFor(modelItem => item.Product_Code)</td>
    <td>@Html.DisplayFor(modelItem => item.Qty_Ordered)</td>
    <td>@Html.DisplayFor(modelItem => item.Qty_Available)</td>
    <td>@Html.DisplayFor(modelItem => item.Qty_Returned)</td>
    <td>
        @* 加class用于事件绑定，移除内联onclick *@
        <input type="checkbox" name="return" class="return-check">
    </td>
    <td>
        @* 移除重复id，加class用于定位，把计算所需数值存在data属性中 *@
        <input 
            class="ctl-number new-qty" 
            type="number" 
            name="newQty"
            data-qty-ordered="@item.Qty_Ordered.Value"
            data-qty-available="@item.Qty_Available.Value"
        />
    </td>
</tr>    
}
</table>

第二步：编写独立JS逻辑 #

把JS代码放在表格标签结束后的公共脚本区域，全页面只需要定义一次，不需要放在循环内：

<script>
$(function(){
    // 监听所有退货复选框的状态变更
    $('.return-check').on('change', function(){
        // 定位当前复选框所在的表格行
        const $currentRow = $(this).closest('tr');
        // 找到同行的新库存输入框
        const $qtyInput = $currentRow.find('.new-qty');
        
        if(this.checked){
            // 勾选时从data属性读取数值计算后赋值
            const ordered = Number($qtyInput.data('qty-ordered'));
            const available = Number($qtyInput.data('qty-available'));
            $qtyInput.val(ordered + available);
        }else{
            // 取消勾选时清空输入框
            $qtyInput.val('');
        }
    })
})
</script>

方案说明 #

• 完全符合HTML规范，不存在重复ID问题
• JS逻辑全局只定义一次，不会出现函数覆盖问题
• 基于当前点击元素做行级定位，操作完全隔离，不会串改其他行的数值
• 补全了取消勾选清空输入框的逻辑
• 去掉了冗余的全局遍历，执行效率更高
• 后续表单提交时，所有name为newQty的输入框值会正常随表单提交到后端，不需要额外调整提交逻辑

内容的提问来源于stack exchange，提问作者Kip M.