php显示和同一页面上的总定价

Question

我一直在寻找一种方法来累加单选按钮的总和，并在php的同一页面上回显它。有没有办法做到这一点？我已经包含了我正在看的内容的图像。

这是我到目前为止提出的代码：

PHP

<?php
$prod1 = "10";
$prod2 = "20";
$prod3 = "30";
?>


<form action="">
<input type="radio" name="prod1" value="<?=$prod1?>">$10 product 1<br>
<input type="radio" name="prod2" value="<?=$prod2?>">$20 product 2<br>
<input type="radio" name="prod3" value="<?=$prod3?>">$30 product 3
</form>

<!-- This is where the total shows live upon radio check -->
<?php
echo ="$total"
?>

我是新手，所以它不会发布图片，这里是我的图片的链接：

Answer 1

Working example

您需要一个总数将会成为的元素，以及一种识别这些输入的方法。我使用的input不是很具体;如果您在该表单中有更多内容，则可能需要更改此内容。

我将change绑定到表单（我给了id products），因为输入上的更改事件会冒泡到表单，我们需要搜索整个表单输入所以有必要不必遍历，如果函数绑定到输入字段，我们需要这样做。

然后，简单地说，在更改表单中的某些内容时，将已选中元素的值相加。使用parseFloat()因为值是字符串而你最终会得到“102030”，你真的想要“60”。

HTML

<form action="" id="products">
    <label><input type="radio" name="prod1" value="10" />$10 product 1</label>
    <br />
    <label><input type="radio" name="prod2" value="20" />$20 product 2</label>
    <br />
    <label><input type="radio" name="prod3" value="30" />$30 product 3</label>
</form>

<p>Total $<span id="total">0</span></p>

的jQuery

$(function(){
    $('#products').on('change', function(){
        var total = 0;
        $(this).find('input:checked').each(function(){
            total += parseFloat($(this).val());
        });
        $('#total').text(total);
    });
});

顺便说一句，如果用户应该能够取消选中这些选项，则需要使用<input type="checkbox" ...