foreach循环中计算checkbox/radio选中值功能不生效求助

问题原因 #

• JS依赖顺序错误：当前代码先编写jQuery业务逻辑，后引入jQuery库，执行业务代码时jQuery未加载，会直接报错。
• 重复ID冲突：代码中使用了#service_calculate、#total这类全局唯一ID，放入foreach循环渲染后，页面会出现多个同ID元素，jQuery ID选择器仅会匹配第一个命中元素，后续循环生成的表单无法触发事件，总价也只会更新第一个显示区域，这是放入循环后失效的核心原因。
• 选择器范围错误：原有$('input[type=checkbox], input[type=radio]')是全局匹配所有对应元素，存在多个计算表单时会全局累加所有选中值，逻辑错误。
• 动态元素绑定失效：循环渲染属于动态生成内容，直接给form绑定change事件可能因元素加载顺序问题绑定失败，兼容性差。

修复方案 #

1. 调整JS加载顺序，先引入jQuery再编写业务代码，全局仅加载一次JS，不要放入循环中重复渲染。
2. 把所有唯一ID替换为类名，使用相对选择器限定查找范围，适配多表单循环场景。
3. 改用事件委托的方式绑定事件，适配动态生成的表单元素。

修复后代码示例

公共JS代码（全局仅加载一次，不要放入循环）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
  // 事件委托绑定，适配所有动态生成的计算表单
  $(document).on('change', '.service_calculate', function() {
    let totalPrice = 0;
    // 仅查找当前表单内的选中项
    $(this).find('input[type=checkbox]:checked, input[type=radio]:checked').each(function() {
      totalPrice += parseInt($(this).val()) || 0;
    });
    // 仅更新当前表单对应的总价
    $(this).find('.total span').text(totalPrice);
  });
});
</script>

可循环渲染的表单代码（可直接放入foreach中生成多个，互不干扰）：

<form class="service_calculate">
  <table class="table">
    <thead>
      <tr>
        <th>附加项目</th>
        <th>描述</th>
        <th>价格</th>
        <th style="width: 130px;">选择</th>
      </tr>
    </thead>
    <tbody>
      <!-- 原有循环输出服务项的逻辑保持不变即可 -->
      <tr>
        <td>服务1</td>
        <td>这是服务1的描述</td>
        <td>10</td>
        <td><input class="checkbox" type="checkbox" value="10" name="Service 1">选择</td>
      </tr>
      <tr>
        <td>服务2</td>
        <td>这是服务2的描述</td>
        <td>10</td>
        <td><input class="checkbox" type="checkbox" value="10" name="Service 2">选择</td>
      </tr>
      <tr>
        <td>服务3</td>
        <td>这是服务3的描述</td>
        <td>15</td>
        <td><input class="checkbox" type="checkbox" value="15" name="Service 3">选择</td>
      </tr>
    </tbody>
  </table>
  <div class="total">总价：<span>0</span></div>
</form>

内容的提问来源于stack exchange，提问作者API-heartache