用 JavaScript 计算复选框的值

Question

我需要使用复选框计算 HTML 表单中项目的值。每个复选框都与一个产品序列号相关，表单中的每个复选框都有不同的积分值。我不能允许值的总和大于预定的数字。我找到了这个计算总和的 JavaScript，但是当我在表单中使用它时，我无法解析实际的项目编号。相反，表单返回一个复选框的值。

这里是 JavaScript：

<script type="text/javascript"> 
function chkcontrol(j) {
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].value);
}
document.getElementById("msg").innerHTML="Sum :"+ sum;

if(sum >500){
sum = sum - parseInt(document.form1.ckb[j].value);
document.form1.ckb[j].checked = false ;
alert("Sum of the selection can't be more than 500") 
//return false;
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
}
}
</script>

表格如下所示：

<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=120 onclick='chkcontrol(0)';> Serial# 123001 (value = 120) </td></tr>
<tr><td><input type=checkbox name=ckb value=200 onclick='chkcontrol(1)';> Serial# 123002 - (value = 200) </td></tr>
<tr><td><input type=checkbox name=ckb value=350 onclick='chkcontrol(2)';> Serial# 123003 - (value = 350) </td></tr>
<tr><td><input type=checkbox name=ckb value=100 onclick='chkcontrol(3)';> Serial# 123004 - (value = 100) </td></tr>
</table></form>
Sum of the values can't exceed 500. 
<br><br>
<div id=msg></div>

目前，复选框的值是加到总和中的数字。当我解析表单时，我只能通过名称 cab 获得该号码，并且我没有得到任何关于 Serial# 的信息。我需要的是能够让复选框的值等于项目的序列号 - 即 123004 - 我以后可以在数据库中引用这个序列号。

提前致谢。

Answer 1

您可以为每个复选框创建一个数据属性并添加序列号。然后在执行函数时使用 document.querySelectorAll 来获取所有选中的复选框。 document.querySelectorAll 将给出一个节点列表。要使用数组方法map，它首先使用扩展运算符... 转换为数组。这里使用数组方法map返回一个从data属性中检索到的序列号数组

function chkcontrol(j) {
  var sum = 0;
  const checkedBoxes = []
  for (var i = 0; i < document.form1.ckb.length; i++) {

    if (document.form1.ckb[i].checked) {
      sum = sum + parseInt(document.form1.ckb[i].value);
    }
    document.getElementById("msg").innerHTML = "Sum :" + sum;

    if (sum > 500) {
      sum = sum - parseInt(document.form1.ckb[j].value);
      document.form1.ckb[j].checked = false;
      alert("The total points used can't be more than 500")
      //return false;
    }
    remaining = 500 - sum;
    document.getElementById("msg").innerHTML = "<b>Points Used: </b>" + sum + "<br><b>Remaining Points: </b>" + remaining;

  }
  // added code here
  const box = [...document.querySelector('form[name="form1"]')
               .querySelectorAll('input[name="ckb"]:checked')]
               .map(item => item.dataset.serial);
  console.log(box)
}

<form name='form1'>
  <table>
    <tr>
      <th>Select</th>
    </tr>
    <tr>
      <td><input type='checkbox' name='ckb' data-serial='123001' value='120' onclick='chkcontrol(0)' ;> Serial# 123001 (value = 120) </td>
    </tr>
    <tr>
      <td><input type='checkbox' name='ckb' data-serial='123002' value='200' onclick='chkcontrol(1)' ;> Serial# 123002 - (value = 200) </td>
    </tr>
    <tr>
      <td><input type='checkbox' name='ckb' data-serial='123003' value='350' onclick='chkcontrol(2)' ;> Serial# 123003 - (value = 350) </td>
    </tr>
    <tr>
      <td><input type='checkbox' name='ckb' data-serial='123004' value='100' onclick='chkcontrol(3)' ;> Serial# 123004 - (value = 100) </td>
    </tr>
  </table>
</form>
<div id='msg'></div>

Answer 2

你会尝试一下吗...？

const 
  myForm = document.forms['my-forn']
  ckb_n  = ['ckb1', 'ckb2', 'ckb3', 'ckb4' ]
, pSum   = document.querySelector('#p-sum span')
  ;
  
myForm.onsubmit = e =>
  {
  e.preventDefault() // disable submit for test
  }
myForm.oninput = e =>
  {
  let total = ckb_n.reduce((sum,nam)=>
    {
    sum += myForm[nam].checked ? Number(myForm[nam].value) : 0
    return sum
    }
    , 0)
  if (total > 500)
    {
    e.target.checked = false
    let label = e.target.closest('label')
    label.classList.add('errarum')
    setTimeout(_=>{label.classList.remove('errarum')}, 2000)
    alert("Sum of the selection can't be more than 500") 
    }
  else
    pSum.textContent = total
  }

label {
  display : block;
  cursor  : pointer;
  }
.errarum {
  color  : red;
  }

<form name="my-forn">
  <label>
    <input type="checkbox" name="ckb1" value="120" >
    Serial# 123001 (value = 120)
  </label>
  <label>
    <input type="checkbox" name="ckb2" value="200" >
    Serial# 123002 (value = 200)
  </label>
  <label>
    <input type="checkbox" name="ckb3" value="350" >
    Serial# 123003 (value = 350)
  </label>
  <label>
    <input type="checkbox" name="ckb4" value="100" >
    Serial# 123004 (value = 100)
  </label>
</form>

<p id="p-sum"> Sum : <span>0</span><p>