时间戳

首页 > 解决方案 > 用 JavaScript 计算复选框的值

javascript - 用 JavaScript 计算复选框的值

问题描述

我需要使用复选框计算 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 - 我以后可以在数据库中引用这个序列号。

提前致谢。

标签： javascripthtmljquerycheckbox

解决方案

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

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>

推荐阅读