Javascript 自动计算所选单选按钮的总和

我一直在尝试自动计算所选单选按钮的总和。单选按钮的值来自数据库。这是我到目前为止所做的尝试。它只适用于第一个模态。下面是一个链接，指向手动获取数据的片段

菜单
“class=“img流体”alt=“样品奶茶”>





- 
&时代；
尺寸选择1
-PHP
总计：0菲律宾比索

取消
现在点菜
\\javascript
$（“：radio”）。打开（“更改”，函数（）{
var合计=0；
$（“：radio:checked”）。每个（函数（）{
总数+=数量（该值）；
});
$（“#总计”）。正文（总计）；
});

您有两个id为

total

的

span

元素。因此，第二个模式的总值显示在第一个模式中，因为这是DOM中id为

total

的第一个元素

将您的总跨度指定给一个类而不是id，并搜索与单击的单选按钮最接近的

表单

。然后找到属于它的总

span

此外，由于一次只能有一个单选按钮处于活动状态，因此无需对所有单选按钮进行操作。只需输出所选单选输入的值即可

$（“：radio”）。打开（“更改”，函数（）{
$（this.closest（'form'）.find（'.total'）.text（Number（this.value））；
})；

尺寸选择1
常规-PHP 10.00
大型-PHP20.00
总计：0菲律宾比索

尺寸选择1
常规-PHP 30.00
大型-PHP 40.00
总计：0菲律宾比索

您有两个id为

total

的

span

元素。因此，第二个模式的总值显示在第一个模式中，因为这是DOM中id为

total

的第一个元素

将您的总跨度指定给一个类而不是id，并搜索与单击的单选按钮最接近的

表单

。然后找到属于它的总

span

此外，由于一次只能有一个单选按钮处于活动状态，因此无需对所有单选按钮进行操作。只需输出所选单选输入的值即可

$（“：radio”）。打开（“更改”，函数（）{
$（this.closest（'form'）.find（'.total'）.text（Number（this.value））；
})；

尺寸选择1
常规-PHP 10.00
大型-PHP20.00
总计：0菲律宾比索

尺寸选择1
常规-PHP 30.00
大型-PHP 40.00
总计：0菲律宾比索

我无法测试这段代码，但我的想法是，你可以试试这个

 <input
    onChange="calc(this,<?php $forsize['id']; ?>)"
    class="form-check-input"
    type="radio"
    name="radiobutton"
    id="rbtn2"
    value="10.00">

---

我无法测试这段代码，但我的想法是，你可以试试这个

 <input
    onChange="calc(this,<?php $forsize['id']; ?>)"
    class="form-check-input"
    type="radio"
    name="radiobutton"
    id="rbtn2"
    value="10.00">

我已将span id更改为class，现在它可以工作了，但现在似乎当我单击第一个模态上的单选按钮时，它将添加到第二个模态上。我已更新了我的代码片段，先生。非常感谢您的回复。有关工作示例，请参阅更新的答案。如果此答案对您有效，请将其标记为已接受。提前谢谢。我已将span id更改为class，现在它可以工作了，但现在看来，当我单击第一个模式上的单选按钮时，它将添加到第二个模式上。。我已更新了我的代码片段，先生。。非常感谢您的回复。有关工作示例，请参阅更新的答案。如果此答案对您有效，请将其标记为已接受。提前谢谢。
 <p>Total: PHP <span id="total-<?php echo $forsize['id']; ?>">0</span></p>

<script>
function calc(el, id) {
var value = el.value;
    //do the formula then emit the answer to the span total with id
    
    }
        </script>