将单选按钮 onclick 的值相加而不提交表单

Question

我在一个链接上看到了添加复选框的功能，但我需要立即添加单选按钮，并且可以使用任何类型的编码。

http://www.madirish.net/tech.php?section=1&article=7

我的表格如下：

    <form action="orders.php" method="post" name="Reservar" target="_self">

        <table width="800" border="0">
        <?php
        foreach ($rows as $row) {
        ?>
        <tr>
         <td><input name="platofuerte" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />
         </td>
         <td><input name="platofuerte1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />
         </td>
         <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />
         </td>
         <td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />
        </td>
        <td width=""><input name="price" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />
        </td></tr>
        </table>

                <table width="800" border="0">

                        <td><input name="bebida" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />

                        </td>

                         <td><input name="bebida1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />

                        </td>

                        <td width=""><input name="price" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />

                        </td>

                        </tr>

                        <?php

                    /*}*/

                   } ?>

                </table>


                <table width="800" border="0">


                        <td><input name="postre" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />

                        </td>

                         <td><input name="postre1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />

                        </td>

                        <td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />

                        </td>

                        <td width=""><input name="" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />

</td>
</tr>
</table>
<table width="800" border="0">
<tr>
<td><input name="aperitivo" type="radio" onClick="checkTotal()" value="<?php echo $row['Producto_Precio']; ?>" />
</td>
<td><input name="aperitivo1" type="hidden" value="<?php echo $row['Producto_ID']; ?>" /><img src='<?php echo htmlspecialchars($row['Producto_Imagen']); ?>' alt='image' name="imagen" id="imagen" />
 </td>
 <td width=""><input name="" type="label" value='<?php echo $row['Producto_Nombre']; ?>' />
</td>
<td width=""><input name="" type="label" value='<?php echo $row['Producto_Descripcion']; ?>' />
</td>
<td width=""><input name="" type="label" value='$<?php echo $row['Producto_Precio']; ?>' />
        </td>
        </tr>
 </table>
<input type="submit" name="Reservar" id="Reservar" value="Reservar" />
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>


           <input type="text" size="2" name="total" value="0"/>
        </form>

理论上，在最后一个输入文本框中，会显示所选单选按钮的总数。我怎样才能使这项工作。此提议的代码适用于一组具有相同名称的收音机和相邻文本行中的单选按钮

我的 php 页面运行对单选按钮的每个组名的查询，因此我最终每个组最多有 4 个项目。我需要把从每个组中选出的那些收音机的总数加起来。

复选框的建议脚本如下：

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

Answer 1

我不知道我是否理解你的问题，但我认为它可以解决这个问题：

在您的单选按钮 onclick 中，您可以使用 this 将元素作为参数传递给您的函数。

<td><input name="bebida" type="radio" onclick="checkTotal(this)" value="2" />

现在您的 checkTotal 函数将接收该元素，您可以根据需要对其进行操作。

checkTotal = function (e) {
    console.log(e.value);
}

根据您想要做什么，您可以使用 onclick 或 onchange。不同的是，即使已经选择了收音机，onclick 仍然可以工作。

希望它能解决你的问题。

Answer 2

我通过为每组收音机创建一个组然后添加组并在一个空的文本输入框中显示总数来解决这个问题。