添加具有不同输入名称的复选框值

Adding checkbox values with different input names

本文关键字：复选框 输入 添加      更新时间：2023-09-26

我有以下代码，当复选框被选中时，它将复选框加在一起，并在页面底部产生总计。此函数使用以下代码：

<script type="text/javascript">
function checkTotal() {
    document.listForm.total.value = '';
    var sum = 68.50;
    for (i=0;i<document.listForm.choice.length;i++) {
      if (document.listForm.choice[i].checked) {
        sum = sum + parseFloat(document.listForm.choice[i].value);
      }
    }
    document.listForm.total.value = sum.toFixed(2);
}
</script>

这些复选框位于表单中，我需要将表单发送到电子邮件帐户。目前，由于所有复选框共享相同的输入名称"choice"，因此 PHP 将仅发送最后一个复选框值。

我需要更改复选框输入名称代码以将不同的复选框命名为"选择1"选择2"选择3"。我必须在javascript中更改什么才能使函数计算所有名为"选择1"选择2"选择3"等的复选框，而不仅仅是将所有名为"选择"的复选框加在一起？我几乎没有Javascript和PHP知识，所以任何帮助将不胜感激。谢谢。

与其使复选框名称唯一，不如在其名称后附加"[]"。这将导致 PHP 将值转换为数组，而不仅仅是保留最后一个值。

所以你会想要一个选择的名字[]而不是选择。

您还可以在此答案中找到一些示例代码。

下面的代码工作正常（一个独立的网页）。问题是当复选框被称为不同的名称时，如何获取复选框的数组（组）。如果你使用 jquery，你可以给它们所有相同的类，然后通过该类来获取它们，但如果你使用裸 javascript，那么你可以通过标签名称获取元素（在复选框的情况下为"input"），并检查每个元素都有一个以"选择"开头的 name 属性，不以"选择"开头， 比如按钮（也是输入）或其他具有不同名称的复选框。如果页面很大，则效率有点低下，除非您以某种方式对复选框进行分组。

要对它们进行分组，您可以将它们冷放在类似

`<div id="checkboxes"> (checkboxes go here) </div>`

然后使用 

`var cb = document.getElementById("checkboxes");`
`var arrInputs =cb.getElementsByTagName("input");`
  • 为该行获取 arrInputs 数组。这只会从div 中获取输入类型元素。 我不想假设页面布局允许您的复选框放在一个div 中

希望这有帮助道格 

<script type="text/javascript">
function checkTotal() {
    document.forms.listForm.total.value = '';
    var sum = 68.50;
    var frm=document.forms.listForm; // wasnt sure what your original listForm element was so I've put this form into a variable, frm
    frm.total.value = '';

    var arrInputs =document.getElementsByTagName("input");    // get all Input type elements on the form
    for (i=0; i < arrInputs .length;i++) {
      if (arrInputs[i].name.substr(0,6) == "choice")   { // if the name starts with "choice"
         if (arrInputs[i].checked) {
          sum = sum + parseFloat(arrInputs[i].value);
         }
      }
    }
    frm.total.value = sum.toFixed(2);
}
</script>
</head>

<body>
<form name="listForm">
<a href='javascript:checkTotal()'>check</a><br>
<input type=checkbox name="choice1" value="1"><br>
<input type=checkbox name="choice2" value="2"><br>
<input type=checkbox name="choice3" value="3"><br>
<input type=checkbox name="choice4" value="4"><br>
<input type=checkbox name="choice5" value="5"><br>
<input type=checkbox name="choice6" value="6"><br>
<br>
<input type=text name=total value=""><br>
</form>
</body>
</html>
相关文章：