如何用JQuery实现复选框勾选加3、取消减3的数值计算功能？

要实现你需要的功能（勾选复选框时成本加3，取消时减3并保留当前值），我们可以通过以下步骤完成，全程使用jQuery处理前端交互：

1. 优化视图元素，添加可识别的标识 #

首先给显示成本的<label>添加一个ID，同时给所有目标复选框添加统一的class，方便jQuery精准选择和操作：

<!-- 添加id到成本标签 -->
<label id="costLabel">Cost of this report: $ @Session["ProductCost"]</label>

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) {
    <div>
        <!-- 添加class到复选框 -->
        @Html.CheckBoxFor(m => m.IsTrainers, new { @class = "cost-adjust-checkbox" })
        @Html.LabelFor(m => m.IsTrainers, "Include trainers in first Dam")
    </div>
    <div>
        @Html.CheckBoxFor(m => m.IsSales, new { @class = "cost-adjust-checkbox" })
        @Html.LabelFor(m => m.IsSales, "Include Sales in first Dam")
    </div>
    <div>
        @Html.CheckBoxFor(m => m.IsResearch, new { @class = "cost-adjust-checkbox" })
        @Html.LabelFor(m => m.IsResearch, "Research Style (all foals inc)")
    </div>
    <div>
        @Html.CheckBoxFor(m => m.IsEngagement, new { @class = "cost-adjust-checkbox" })
        @Html.LabelFor(m => m.IsEngagement, "Include Race engagements in first Dam")
    </div>
}

2. 编写jQuery交互逻辑 #

在页面底部（或引入的JS文件中）添加以下代码，实现数值计算和更新：

$(document).ready(function() {
    // 获取成本标签元素
    const $costLabel = $('#costLabel');
    // 从标签文本中提取原始成本数值（去除$和多余字符）
    const originalCost = parseFloat($costLabel.text().replace(/[^0-9.]/g, ''));
    
    // 初始化当前成本：原始值 + 已勾选复选框数量×3（处理页面加载时已勾选的情况）
    let currentCost = originalCost + ($('.cost-adjust-checkbox:checked').length * 3);

    // 统一更新成本显示的函数
    function updateCostDisplay() {
        // 保留两位小数，确保金额格式规范
        $costLabel.text(`Cost of this report: $ ${currentCost.toFixed(2)}`);
    }

    // 页面加载完成后先更新一次显示（处理初始勾选状态）
    updateCostDisplay();

    // 给所有目标复选框绑定change事件
    $('.cost-adjust-checkbox').on('change', function() {
        // 根据勾选状态调整当前成本
        if ($(this).is(':checked')) {
            currentCost += 3;
        } else {
            currentCost -= 3;
        }
        // 更新显示内容
        updateCostDisplay();
    });
});

关键逻辑说明 #

• 初始值处理：页面加载时会自动计算已勾选复选框的数量，把对应的金额加到原始成本上，确保初始显示正确
• 状态跟踪：用currentCost变量持续跟踪当前的成本值，每次操作都基于这个值增减，而不是反复使用原始值
• 格式规范：使用toFixed(2)确保金额显示为两位小数，符合货币展示习惯；如果不需要可以移除该方法
• 精准选择：通过统一的class选择目标复选框，避免影响页面中其他无关的复选框

这样就能完美实现你需要的功能：勾选任意复选框成本加3，取消则减3，并且始终保留当前计算后的数值。

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