用 JavaScript 计算复选框的值

Posted 2023-05-08

【中文标题】用 JavaScript 计算复选框的值

【英文标题】：Calculating value of checkboxes with JavaScript

【发布时间】：2021-10-07 11:32:55

【问题描述】：

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

提前致谢。

【问题讨论】：

请做一个最小的、可重现的例子。目前，您的代码生成“Cannot read property 'ckb' of undefined"”

很抱歉。现在应该修好了。

您的计算部分工作正常。那么，您无法实现的目标是什么？

当我解析网页时，我只能取回正在添加的数字的值——因为 JavaScript 在计算中使用了这个值。我需要能够包含实际项目的序列号 - 显示在复选框的文本中。例如，在第一个复选框中，值 120 是添加的数字，而我需要能够包含“123001”作为要由表单处理的复选框项目的序列号。谢谢。

【参考方案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>

【讨论】：

谢谢——但是当我尝试解析表单时，我只得到“name”的值——并且“data-serial”没有传递给解析脚本。缓冲区如下所示 - &ckb=120&ckb=200（选中前两个复选框后）

是否可以使值等于序列号并让 JavaScript 在复选框中使用不同的变量？或者，是否有可能有两个值 - 第一个是计算编号，第二个是序列号？例如 - “120-123001”。如果我能找回“120-123001”，我可以从中解析出序列号。换句话说——如果我把“120-123001”作为值，JavaScript可以解析第一个数字并在计算中使用它吗？

您需要将data-serial 作为属性添加到输入类型复选框。看例子中的html代码

我确实将它添加到表单中：``` ``` 但是form 不传递 data-serial 的值。

您应该添加引号。其次，你不需要通过。数据串行。在执行该函数时，它将使用 document.querySelector 自行拾取。您还需要将整个 html 包装在名称为 form1 的 form 中

【参考方案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>