单击单选按钮时如何输出总价？

Question

我已经检查了以下问题： 单击单选按钮时如何输出价格？

但这对解决方案没有帮助，这就是为什么我要发布类似的问题。

我有两个单选框。 一个提供银计划，另一个提供金计划。 如果用户单击“白银计划”，则总价为499美元。

我不知道如何最好地实现它。

<div class="plan-wrapper">
                        <label id="silver-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="$699"/> Silver Plan</label>
                        <label id="silver-plan-price">$699</label>
                        <label id="gold-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="$999"/> Gold Plan</label>
                        <label id="gold-plan-price">$999</label>
                        </div>


                  <div class="wrapper-b">
                        <span id="total">Total</span>
                        <output type="number" name="price" id="output"></output>
                        <!--<span id="total-price"></span>-->
                </div>

JS

<script>
function calculate(obj) {
document.getElementById("output").innerHTML = obj.value;
}
</script>

Answer 1

您需要为您的投入增加价值...

<input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" **value="$699"**/>

<input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" **value="$999"**/>

Answer 2

首先，您的单选按钮不具有value属性，因此obj.value将不起作用。

在这里看看： 使用Javascript获取单选按钮值

Answer 3

我认为您错过了每个输入的值：

 function calculate(obj) { document.getElementById("output").innerHTML = obj.value; } 

 <div class="plan-wrapper"> <label id="silver-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="699"/> Silver Plan</label> <label id="silver-plan-price">$699</label> <label id="gold-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="999"/> Gold Plan</label> <label id="gold-plan-price">$999</label> </div> <div class="wrapper-b"> <span id="total">Total</span> <output type="number" name="price" id="output"></output> <!--<span id="total-price"></span>--> </div> 

Answer 4

首先，您必须为收音机设置值。 然后设置类或名称并获取元素。 可以使用jQuery完成。如果要使用输出，也可以使用AngularJs完成所有工作。

所以，如果我有您的问题，这是代码：

jQuery(document).ready(function(){

    $(document).on("click", ".planClass", function(e){

    if($(this).is(':checked')){

        $("#output").html($(this).val());
    }

    });  

});

参见JSfeedle http://jsfiddle.net/4tafnwcj/1/