室友成本分摊JavaScript应用问题：表单值获取与余额表生成失败

我帮你梳理下代码里的问题，然后给出修复后的完整实现，让它能正确生成你想要的余额表：

问题分析 #

你的代码目前有几个关键问题导致无法正确计算：

• 类名不匹配：HTML里贡献者输入框的class是contributors，但JS里用了$('.contributor')（少了个s），导致无法获取到输入值
• 没有关联参与者和余额更新：你只计算了单个贡献者和分摊额的差值，但没有把这个差值对应到具体成员，也没有更新页面上的余额表格
• 缺少非参与者的处理：非勾选的成员余额应该保持不变
• 输入校验缺失：没有处理成本或贡献金额为空、非数字的情况

修复后的完整代码 #

<div>
  <table id="dashboard">
    <tr>
      <th>TOTAL</th>
      <th>member1</th>
      <th>member2</th>
      <th>member3</th>
      <th>member4</th>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="bmem1">0</td>
      <td id="bmem2">0</td>
      <td id="bmem3">0</td>
      <td id="bmem4">0</td>
    </tr>
  </table>
</div>
<div id="newCostButton">
  <button id="showForm" href="#">Add New Cost</button>
</div>
<form id="elForm">
  <label>Cost:</label>
  <input type="text" id="cost" placeholder="Add new cost">
  <br>
  <label><b>Participants:</b></label><br>
  <span>member1</span>
  <input type="checkbox" name="Participant" value="member1">
  <span>member2</span>
  <input type="checkbox" name="Participant" value="member2">
  <span>member3</span>
  <input type="checkbox" name="Participant" value="member3">
  <span>member4</span>
  <input type="checkbox" name="Participant" value="member4">
  <br>
  <b>contributors:</b><br>
  member1 <input class="contributors" type="text" name="member1">
  member2 <input class="contributors" type="text" name="member2">
  member3 <input class="contributors" type="text" name="member3">
  member4 <input class="contributors" type="text" name="member4">
  <input type="submit" id="cal" value="calculate">
</form>
<div id="doc"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
  var $newCostButton = $('#newCostButton');
  var $elForm = $('#elForm');
  var $cost = $('#cost');
  $newCostButton.show();
  $elForm.hide();

  $newCostButton.on('click', function(){
    $newCostButton.hide();
    $elForm.show();
  });

  $('input:text').focus(function(){
    $(this).val("");
  });

  function cal(){
    // 获取并校验成本金额
    var totalCost = parseInt($cost.val());
    if(isNaN(totalCost) || totalCost <= 0){
      alert("请输入有效的成本金额");
      return;
    }

    // 获取勾选的参与者
    var participants = $('input[name="Participant"]:checked').map(function(){
      return $(this).val();
    }).get();
    var participantCount = participants.length;
    if(participantCount === 0){
      alert("请至少选择一位参与者");
      return;
    }

    // 计算每人需分摊的金额
    var perPersonShare = totalCost / participantCount;

    // 获取所有成员的当前余额
    var memberBalances = {
      member1: parseInt($('#bmem1').text()),
      member2: parseInt($('#bmem2').text()),
      member3: parseInt($('#bmem3').text()),
      member4: parseInt($('#bmem4').text())
    };

    // 获取每位成员的实际支付金额
    var contributions = {};
    $('.contributors').each(function(){
      var memberName = $(this).attr('name');
      var amount = parseInt($(this).val()) || 0; // 空值或非数字视为0
      contributions[memberName] = amount;
    });

    // 更新余额：支付金额 - 分摊金额（仅参与者）
    participants.forEach(function(member){
      memberBalances[member] += (contributions[member] - perPersonShare);
    });

    // 更新页面上的余额表格
    $('#bmem1').text(memberBalances.member1);
    $('#bmem2').text(memberBalances.member2);
    $('#bmem3').text(memberBalances.member3);
    $('#bmem4').text(memberBalances.member4);
    $('#total').text(totalCost);

    // 重置表单并隐藏
    $elForm[0].reset();
    $elForm.hide();
    $newCostButton.show();
  }

  $elForm.on('submit', function(e){
    e.preventDefault();
    cal();
  });
});
</script>

关键修复点说明 #

• 类名修正：把JS里的$('.contributor')改成$('.contributors')，匹配HTML里的类名
• 参与者与余额关联：用map()获取所有勾选的参与者，然后针对这些成员计算余额变化，非参与者余额保持不变
• 输入校验：添加了成本金额和参与者数量的校验，避免无效输入
• 余额持久更新：每次计算后更新页面上的表格单元格，同时保留之前的余额（支持多次添加费用）
• 空值处理：把未输入的贡献金额视为0，避免NaN错误

用你给出的测试案例：总费用300，参与者m1、m3、m4，m3支付180，m4支付120，计算后余额会正确显示为：

• m1: 0 - 100 = -100
• m2: 0（未参与）
• m3: 0 + (180 - 100) = +80
• m4: 0 + (120 - 100) = +20

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