實時計算？

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>