add up values from radio buttons onclick without submitting form

Question

I saw on a link this ability to add up check boxes, but I need radio buttons added up instantly with any type of coding possible.

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

my form is the following:

    <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>

in the last input text box, the totals of the selected radio buttons appear, in theory. How can I make this work. this propposed code is for a group of radios with the same name and the radio buttons in adjacent lines of text

my php page runs queries of each group name of radio buttons so I end up with up to 4 items per group. I need to add up totals of those radios sellected from each group.

the suggested script for check boxes is the following:

<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

I don't know if I understood your problem, but I think that it can solve that:

In your radio buttons onclick, you can pass the element as a parameter to your function using the this.

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

Now your checkTotal function will receive the element and you can manipulate it as you want.

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

And depending of what do you want to do, you can user onclick or onchange. The difference is that onclick will still working even if the radio already is selected.

Hope that it solve your problem.

Answer 2

我通过为每组无线电创建一个组然后添加这些组并在一个空的文本输入框中显示总数来解决它。