Question

我检查了以下问题：How to output the price when clicking the radio button?

但它没有帮我解决问题，这就是我发布类似问题的原因。

我有两个收音机复选框。一个提供白银计划和另一个黄金计划。如果用户点击银色计划，则总价格将为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无法正常工作。

看看这里：Get Radio Button Value with 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/

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

4 个答案: