基于单选按钮选择的计算

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作为单选按钮的值，那么后端可以添加选定的值？