实时计算？

Question

我已经搜索了所有的SOF，没有找到任何与我的问题相匹配的主题。我已经编写了一个HTML表单，稍后我将使用PHP进行处理，但在表单中我有一些选项可供用户选择。这是HTML代码

<label for="FIELD6">Model Type: </label><br>
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model"  checked  onclick="doMath()" />Normal Model<br>
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath()" data-clicked="no" />Workshop Model
<p id="total"></p>

因此，用户可以在正常和车间模型之间进行选择。我试图设置它，以便当用户检查workshopmodel模型单选按钮时，它会增加总价格(在段落标记中指定)。以下是我对我鲜为人知的语言jQuery的尝试：

function doMath() {
    var basePrice = 15;
    var baseModel = 0;
    var customModel = 5;
    var modelTotal = ;
    function workshopModel() {
        if(getElementById("workshopmodel").click(function() {
            modelTotal = basePrice + customModel;
        }
    }
    function defaultModel() {
        if(getElementById("basemodel").click(function() {
            modelTotal = total basePrice + baseModel;
        }
    }
}
$("#total").html('<font color="black">Total Price:</font><font color="#09ff00">' +  workshopModel() + '');

因此，我试图让它实时添加到basePrice中，然后在用户每次更改选择(实时)时，用它代替标记为“总计”的ID。因此，如果用户选择workshopmodel模型，脚本将添加15和5，导致20，如果他们选择基模型，脚本将添加15和0，从而产生15。我没有定义变量modelTotal，因为它应该在后面的脚本中定义。有人能帮我解决这个问题吗？

Answer 1

这应该是你想要的。而且，不需要jQuery。

​

function doMath() {
    var basePrice = 15;
    var baseModel = 0;
    var customModel = 5;
    var modelTotal;
    if (document.querySelector('input[name="FIELD6"]:checked').value == "Normal Model") {
        modelTotal = basePrice + customModel;
    }

    if (document.querySelector('input[name="FIELD6"]:checked').value == "Workshop Model") {
        modelTotal = basePrice + baseModel;
    }
    console.log(modelTotal);
    document.getElementById('total').innerHTML = '<span style="color:black">Total Price:' + modelTotal + '</span>';
}

<label for="FIELD6">Model Type:</label>
<br>
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" onclick="doMath()" />Normal Model
<br>
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath()" />Workshop Model
<div id="total"></div>

​

Answer 2

这是一个我认为你想要的工作例子。

<label for="FIELD6">Model Type:</label><br>
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model"  checked  onclick="doMath(this)" />Normal Model<br>
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath(this)" data-clicked="no" />Workshop Model
<p id="total"></p>

<script type="text/javascript">
    function doMath(ele) {
        var total = 15;
        if($(ele).attr('id') === 'workshopmodel') {
            total += 5;
        }
        $("#total").html('<font color="black">Total Price:</font><font color="#09ff00">' +  total);
    }
</script>