基於單選按鈕選擇的計算

Question

我正在爲我的web項目使用MEAN堆棧。前端是一個簡單的註冊表格，要求多個用戶輸入。例如，它說「你買了多少產品？」下一個問題是一個單選按鈕。它說這個產品是大還是小？我的問題如下：獲得訂單成本的計算是＃products * 42 +（如果選擇large，則爲12）或＃products * 42 +（如果選擇small，則爲0）。我如何在javascript中編碼（我在後端使用節點）。換句話說，如何告訴我的計算代碼，當用戶選擇一個單選按鈕時，您需要添加一個以下數字，以及如何傳遞輸入到我公式的產品數量？我已經開始通過分配value = 1來獲得較小值，value = 2來獲得較大的單選按鈕選項。只是一個通用的例子會很有幫助，因爲一旦我解決了這個問題，我就可以編寫細節並更新公式。謝謝

Answer 1

如果你想要做在客戶端計算和元素在一個HTML格式如：

<h1>Radio Buttons</h1> 
<form name="catch-radio" method="post"> 
    <div class="input"> 
    <span class="label">How many products are you buying?</span> 
    <input id="product-count" type="text" name="product_count" value="0"/> 
    <br/> 
    <span class="label">Is this product large or small?</span> 
    <br/> 
    <span class="label">Large</span> 
    <input type="radio" name="product-size" value="12" checked="checked"/> 
    <br/> 
    <span class="label">Small</span> 
    <input type="radio" name="product-size" value="0"/> 
    </div> 
</form> 
<div> 
    <h2>Cost of order:</h2> 
    <p id="calculation"></p> 
</div> 

與產品數量的輸入（帶的「產品計數」的ID ）和與產品大小（命名爲'product-size'）相對應的單選按鈕，您可以計算成本並將其輸出到頁面上的元素（ID爲'calculation'），方法是向表單字段添加事件處理程序在表單中註冊更改，然後從調用函數的處理程序執行計算並相應地更新頁面，如下所示：

// Cost is the count of products purchased multipled by 42 then added 
// to 12 in the case that the product is large, and zero in the case 
// that the product is small 
function calculate_cost() { 
    let count = parseInt(document.getElementById('product-count').value); 
    if (count > 0) { 
     let size = 0; 
     for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
      if (document.getElementsByName('product-size')[i].checked) { 
        size = parseInt(document.getElementsByName('product-size')[i].value); 
        break; 
      } 
     } 

     let cost = count * 42 + size 
     document.getElementById('calculation').innerHTML = cost; 
    } 
} 

// handlers for form input change 
// call calculate_cost() on change 
// note that the text input is an on-change event but for radio buttons 
// an onclick handler is needed for each button 
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
    document.getElementsByName('product-size')[i].onclick = function() { 
     calculate_cost(); 
    } 
} 
document.getElementById('product-count').onchange = function() { 
    calculate_cost(); 
} 

我提出了這樣一個快速演示上CodePen這裏：http://codepen.io/P1xt/pen/yOKqXP/

的特別有趣的一點是，單選按鈕，您需要添加單獨的每個按鈕單擊處理程序（它必須是一個點擊不一個變更處理程序，並找出當前選擇哪個收音機，您需要明確檢查每個收音機是否「檢查」。

注意：如果您想在服務器端進行計算，您需要提交表單，然後從提交的表單元素中收集產品數量和產品大小，以便執行計算。

Answer 2

爲什麼不使用0和12作爲單選按鈕的值，那麼後端可以添加選定的值？