如何用JavaScript计算复选框分值同时保留产品序列号提交

你可以通过HTML5的data-*自定义属性存储积分值，将value属性改为存储产品序列号即可，调整逻辑如下：

一、HTML表单调整 #

• 每个复选框的value属性替换为对应产品序列号
• 新增data-points自定义属性存储该选项对应的积分值
• 复选框name属性改为ckb[]（后端接收时可以直接拿到所有选中的序列号数组，避免只能获取最后一个选中值的问题）
• 点击事件直接传入当前元素this，无需手动绑定索引，降低出错概率

<form name="form1" method="post" action="check.php">
<table class='table table-striped'>
  <tr><th>Select</th></tr>
  <tr><td><input type="checkbox" name="ckb[]" value="123001" data-points="120" onclick="chkcontrol(this);"> Serial# 123001 (value = 120) </td></tr>
  <tr><td><input type="checkbox" name="ckb[]" value="123002" data-points="200" onclick="chkcontrol(this);"> Serial# 123002 - (value = 200) </td></tr>
  <tr><td><input type="checkbox" name="ckb[]" value="123003" data-points="350" onclick="chkcontrol(this);"> Serial# 123003 - (value = 350) </td></tr>
  <tr><td><input type="checkbox" name="ckb[]" value="123004" data-points="100" onclick="chkcontrol(this);"> Serial# 123004 - (value = 100) </td></tr>
</table>
<button type="submit">提交</button>
</form>
Sum of the values can't exceed 500. 
<br><br>
<div id="msg"></div>

二、JavaScript逻辑调整 #

将原来读取value计算总和的逻辑，改为读取data-points属性的值计算，保留原有总和不超过500的校验逻辑：

<script type="text/javascript"> 
function chkcontrol(currentCheckbox) {
  var sum = 0;
  // 遍历所有复选框计算总和
  for(var i=0; i < document.form1['ckb[]'].length; i++){
    if(document.form1['ckb[]'][i].checked){
      sum = sum + parseInt(document.form1['ckb[]'][i].dataset.points);
    }
  }
  // 总和超过500时取消当前勾选
  if(sum > 500){
    sum = sum - parseInt(currentCheckbox.dataset.points);
    currentCheckbox.checked = false;
    alert("Sum of the selection can't be more than 500");
  }
  document.getElementById("msg").innerHTML = "Sum :" + sum;
}
</script>

效果说明 #

• 表单提交后，后端$_POST['ckb']会直接返回所有选中的产品序列号数组，可直接用于数据库关联查询
• 前端仍保留选中积分总和不超过500的校验逻辑，和原有功能完全一致

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