在不提交表单的情况下从单选按钮 onclick 中添加值

Question

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

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

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

在不提交表单的情况下从单选按钮 onclick 中添加值

add up values from radio buttons onclick without submitting form

html

javascript

forms

submit

radio-button