Question

我检查过以下教程：

然而，这些教程都没有帮助我使用我的代码。

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

这是我到目前为止所做的：

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

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

php已被删除，但它不应该难以重新加入。

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

Answer 2

我建议您为某些输入添加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>

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

Answer 3

This answer使用Javascript函数调整＆＃34;得分值＃34;根据选择单选按钮的变量。

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

3 个答案: