如何用jQuery从复杂表格中获取单选按钮值并计算能力项总分

没问题，这其实是表单交互里很常见的计算需求，我给你写个完整的实现方案，一步一步讲清楚怎么做：

首先先补全你的HTML表格结构（你提供的代码不完整），我们设计一个清晰的表格布局——每一行对应一个能力项，包含单选评分组、权重、总分显示区域：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table id="ability-table" border="1">
  <thead>
    <tr>
      <th>能力项名称</th>
      <th>评分选项</th>
      <th>权重</th>
      <th>单项总分</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例能力项1 -->
    <tr class="ability-row">
      <td>沟通能力</td>
      <td>
        <label><input type="radio" name="ability-1" class="score-radio" value="1"> 1分</label>
        <label><input type="radio" name="ability-1" class="score-radio" value="2"> 2分</label>
        <label><input type="radio" name="ability-1" class="score-radio" value="3"> 3分</label>
        <label><input type="radio" name="ability-1" class="score-radio" value="4"> 4分</label>
        <label><input type="radio" name="ability-1" class="score-radio" value="5"> 5分</label>
      </td>
      <td class="weight">0.2</td> <!-- 固定权重，也可改成<input type="number" class="weight" value="0.2">实现可编辑 -->
      <td class="total-score">0</td>
    </tr>
    <!-- 示例能力项2 -->
    <tr class="ability-row">
      <td>团队协作</td>
      <td>
        <label><input type="radio" name="ability-2" class="score-radio" value="1"> 1分</label>
        <label><input type="radio" name="ability-2" class="score-radio" value="2"> 2分</label>
        <label><input type="radio" name="ability-2" class="score-radio" value="3"> 3分</label>
        <label><input type="radio" name="ability-2" class="score-radio" value="4"> 4分</label>
        <label><input type="radio" name="ability-2" class="score-radio" value="5"> 5分</label>
      </td>
      <td class="weight">0.3</td>
      <td class="total-score">0</td>
    </tr>
  </tbody>
</table>
</body>
</html>

接下来是jQuery核心计算逻辑，监听单选按钮的切换事件，自动计算对应行的总分：

$(document).ready(function() {
  // 监听所有评分单选按钮的变更事件
  $('.score-radio').on('change', function() {
    // 定位当前单选按钮所在的能力项行
    const $currentRow = $(this).closest('.ability-row');
    
    // 获取选中的评分值，转成数字类型避免字符串拼接错误
    const selectedScore = parseFloat($(this).val());
    // 获取当前行的权重值（如果是输入框，改成$currentRow.find('.weight').val()即可）
    const weight = parseFloat($currentRow.find('.weight').text());
    
    // 计算单项总分，保留2位小数解决浮点精度问题
    const totalScore = (selectedScore * weight).toFixed(2);
    
    // 更新到对应行的总分单元格
    $currentRow.find('.total-score').text(totalScore);
  });
});

关键逻辑说明 #

• 精准定位：用closest('.ability-row')锁定当前单选按钮所在的行，确保计算只影响当前能力项，不会干扰其他行的数据。
• 类型转换：把获取到的字符串类型分值和权重转成float，避免出现"5"+"0.2"="50.2"这种低级错误。
• 精度处理：用toFixed(2)保留两位小数，防止出现0.6000000000000001这类浮点运算精度问题。

扩展优化（可选） #

如果你的权重是可编辑的输入框，还可以给权重框绑定input事件，实现修改权重时自动重新计算：

// 新增权重输入框的监听
$('.weight').on('input', function() {
  const $currentRow = $(this).closest('.ability-row');
  // 找到当前行已选中的单选按钮
  const $selectedRadio = $currentRow.find('.score-radio:checked');
  
  // 只有当用户已经选过评分时才计算
  if ($selectedRadio.length > 0) {
    const selectedScore = parseFloat($selectedRadio.val());
    const weight = parseFloat($(this).val());
    const totalScore = (selectedScore * weight).toFixed(2);
    $currentRow.find('.total-score').text(totalScore);
  }
});

这样不管是切换评分选项还是修改权重，单项总分都会自动更新啦～

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