javascript - 根据javascript中的单选按钮选择更改变量值

Question

我想根据单选按钮选择计算最终价格，但在我的情况下，它只显示页面中的第一个单选按钮值。当检查另一个时，它不会改变。

这是我的代码

<div class="col-xs-12 col-sm-8 col-sm-offset-4">
                <div class="form-group col-sm-12">
                    <input name="gfee" type="hidden" id="gdfee" value="<?php echo $grow['fee'];?>">
                    <label>
                        <div id="rates">
                        <input type="radio" name="visaoption" id ="a" value="60" checked="checked">   Normal <span>- Processing within 3 days</span></label><br>

                        <label>
                        <input type="radio" name="visaoption" id="b" value="100"> Urgent <span>- Guaranteed processing in less than 1 hour (+50$)</span> </label><br>
                        </div>
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
                    <script>
                    $(document).ready(function () {
                        var govfee = document.getElementById('gdfee').value;
                        var afee = document.querySelector('input[name="visaoption"]:checked').value
                        var totalfee = parseFloat(govfee) + parseFloat(afee);
                        document.getElementById("demo").innerHTML = govfee;
                        document.getElementById("demo2").innerHTML = afee;
                        document.getElementById("demo3").innerHTML = totalfee;

                    }
                    );

                    </script>                       
                    <p id="demo"></p>   
                    <p id="demo2"></p>
                    <p id="demo3"></p>                          
                 </div>
            </div>

以及我们如何将'var totalfee'传递给以下脚本中的data-amount =“”，该脚本位于同一表单内的同一页面上。

<script
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="secret-key"
    data-amount="Total Fee"
    data-buttontext="Pay with Debit/Credit Card"
    data-name="Turkey Services"
    data-description="Purchase Description"
    data-image="logo url"
    data-prefill.name="Gaurav Kumar"
    data-prefill.email="[e-mail]"
    data-theme.color="#F37254"
>
</script>

标签： javascriptphpjquery