Question

我有以下代码，它们在选中时会添加复选框，并在页面底部生成一个总计。此函数使用以下代码：

<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将只发送最后一个复选框值。

我需要更改复选框输入名称代码以命名不同的复选框'choice1''choice2''choice3'。我需要在javascript中更改为了使函数计算所有复选框名称'choice1''choice2''choice3'等而不是仅将所有名为'choice'的复选框加在一起？我有很少的Javascript和PHP知识，所以任何帮助将不胜感激。感谢。

Answer 1

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

所以你需要一个选择名称而不是选择。

您还可以在this answer中找到一些示例代码。

Answer 2

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

要对它们进行分组，请将它们冷却到像

这样的标记中

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

然后使用

`var cb = document.getElementById("checkboxes");`
`var arrInputs =cb.getElementsByTagName("input");`

获取arrInputs数组的行。这只会从Div中获取输入类型元素。 Hwever我不想假设页面布局允许你的复选框放在一个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>

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

2 个答案: