基于单选按钮选择的计算

Question

我正在为我的 Web 项目使用 MEAN 堆栈。前端是一个简单的注册表单，需要多个用户输入。例如，它说 "how many products are you buying?" 下一个问题是单选按钮。它说这个产品是大的还是小的？我的问题如下：获得订单成本的计算是#products*42+（如果选择大则为 12）或#products*42+（如果选择小则为 0）。我如何在 javascript 中对此进行编码（我在后端使用节点）。换句话说，我如何告诉我的计算代码，当用户选择一个单选按钮时，您需要添加以下数字，以及如何将输入的产品数量传递给我的公式？我首先为小单选按钮选项分配 value=1，为大单选按钮选项分配 value=2。只是一个一般的例子会很有帮助，因为一旦我解决了这个问题，我就可以编写细节并更新公式。谢谢

Answer 1

为什么不使用 0 和 12 作为单选按钮的值，那么后端可以只添加所选的值？

Answer 2

如果您想在客户端进行计算并且元素采用 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-count'）和对应产品尺寸的单选按钮（名为 '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/

特别有趣的一点是，对于单选按钮，您需要为每个按钮单独添加一个点击处理程序（而且它必须是点击而不是更改处理程序，并且要弄清楚当前选择了哪个单选按钮，您需要明确检查每一个以查看它是否是 'checked'.

注意：如果您希望在服务器端进行计算，则需要提交表单，然后从提交的表单元素中收集产品数量和产品尺寸，以便执行计算。

基于单选按钮选择的计算

Calculations based on radio button choices

javascript

mean-stack