使用 JavaScript 计算复选框的值

Question

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

这里是 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>

table 看起来像这样：

<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 来 return 从数据属性

中检索到的序列号数组

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>

使用 JavaScript 计算复选框的值

Calculating value of checkboxes with JavaScript

html

javascript

checkbox

jquery