如何使用 Javascript 对单选按钮上的值求和？

Question

我查看了以下教程：

How might I calculate the sum of radio button values using jQuery?

How to find a total sum of radio button values using jQuery/JavaScript?

How might I calculate the sum of radio button values using jQuery?

但是，这些教程都没有帮助我编写代码。

我有大约 100 个单选按钮来询问各种问题。其中一个单选按钮询问用户是否要下载徽标；如果是，则价格为 49.99 美元，否则为 0.00 美元。用户必须选择 Silver 或 Gold 计划。所选计划的价格必须添加到徽标价格中，并显示总价。

这是我目前所拥有的：

$(document).ready(function(){

    $('input').iCheck ({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
    });

    var sum = 0;
    $('input').on("change", function(){
        sum = parseInt($('input[name="groupeight"]:checked').val(),10) + parseInt($('input[name="groupnine"]:checked').val(),10);
        console.log(sum);
        if($('input[name="groupeight"]').is(':checked') && $('input[name="groupnine"]').is(':checked')){
            $('#output').html("$"+sum);
        }
    });

    $(".choice").blur(function(){
        $(this).parseNumber({format:"#,###.00", locale:"us"});
        $(this).formatNumber({format:"#,###.00", locale:"us"});
    });
    $(".plan").blur(function(){
        $(this).parseNumber({format:"#,###.00", locale:"us"});
        $(this).formatNumber({format:"#,###.00",locale:"us"});
    });

});

<div class="input-wrapper">
    <div class="answer"><input class="choice" type="radio" name="groupeight" value="49.99"/>
         <label>Yes</label>
    </div>
    <input class="choice" type="radio" name="groupeight" value="0.00" /><label>No</label><br />
</div>

<div class="plan-wrapper">
    <label id="silver-plan"><input class="plan" type="radio" name="groupnine" value="699" <?php if (!isset($_POST['radio']) || isset($_POST['radio']) && $_POST['radio'] == '699'): ?>checked="checked"<?php endif; ?> /><label>Silver Plan</label><span id="silver-plan-price">$699</span></label>

    <label id="gold-plan"><input class="plan" type="radio" name="groupnine" value="999" <?php if (isset($_POST['radio']) && $_POST['radio'] == '999'): ?>checked="checked"<?php endif; ?>/><label>Gold Plan</label><span id="gold-plan-price">$999</span></label>
</div>

Answer 1

我建议你给一些输入添加data-price属性，然后计算价格如下：

function calcPrice() {
  var price = 0;
  $("input[type=radio][data-price]:checked").each(function(i, el) {
    price += +$(el).data("price");
  });
  $("#price").text(price);
}

$("input[type=radio]").on("change", calcPrice);
calcPrice();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Group 1:</p><ol>
<label><li><input type="radio" name="group1" checked>Item 1 (free)</li></label>
<label><li><input type="radio" name="group1" data-price="1">Item 2 ($1)</li></label>
<label><li><input type="radio" name="group1" data-price="2">Item 3 ($2)</li></label>
<label><li><input type="radio" name="group1" data-price="3">Item 4 ($3)</li></label>
</ol>

<p>Group 2:</p><ol>
<label><li><input type="radio" name="group2" data-price="67.89" checked>Another item 1 ($67.89)</li></label>
<label><li><input type="radio" name="group2" data-price="0.00">Another item 2 (free)</li></label>
<label><li><input type="radio" name="group2" data-price="5.00">Another item 3 ($5)</li></label>
<label><li><input type="radio" name="group2" data-price="12.34">Another item 4 ($12.34)</li></label>
</ol>

<p>Total: $<span id="price">--.--</span></p>

如果网页上有多个表单可能包含带有data-price 属性的单选按钮，您可以使查询"input[type=radio][data-price]:checked" 更具体。如果这对您很重要，您还可以添加有关货币的信息。

Answer 2

我创建了一个codepen，它应该完全符合您的要求。

php 已经被移除了，但是应该不难放回去。

（我还删除了很多其他 JavaScript 代码，例如 .iCheck 和 .on('blur')'s。我希望它们不存在出于某种原因。我还升级了你的 jQuery 语法......）

Answer 3

This answer 使用 Javascript 函数根据选择的单选按钮调整“分数”变量的值。