如何选择多个单选按钮并计算总价？

在前端开发中，我们可以使用多个单选按钮来让用户选择不同的选项，并计算总价。以下是一个实现该功能的步骤：

创建HTML表单元素，包含多个单选按钮以及其他必要的输入字段。
使用JavaScript监听单选按钮的选择状态，并根据选择的不同选项计算总价。
在JavaScript中，可以使用条件语句（如if语句或switch语句）来根据选项的不同进行计算，并将计算结果存储在变量中。
在JavaScript中，可以使用事件监听器（如click事件）来捕捉用户对单选按钮的选择，并在选择发生变化时重新计算总价。
在JavaScript中，可以使用DOM操作（如getElementById或querySelector）来获取表单元素的值，并将其用于计算总价。
最后，将计算得到的总价显示给用户，可以通过将总价写入HTML元素（如span或div）的textContent或innerHTML属性来实现。

根据以上步骤，以下是一个示例代码：

HTML:

<form id="orderForm">
  <input type="radio" name="size" value="small"> Small
  <input type="radio" name="size" value="medium"> Medium
  <input type="radio" name="size" value="large"> Large
  
  <input type="checkbox" name="toppings" value="cheese"> Cheese
  <input type="checkbox" name="toppings" value="pepperoni"> Pepperoni
  <input type="checkbox" name="toppings" value="mushrooms"> Mushrooms
  
  <button type="button" onclick="calculateTotal()">Calculate Total</button>
</form>

Total Price: <span id="totalPrice"></span>

JavaScript:

function calculateTotal() {
  var size = document.querySelector('input[name="size"]:checked').value;
  var toppings = document.querySelectorAll('input[name="toppings"]:checked');
  
  var sizePrice = 0;
  switch (size) {
    case 'small':
      sizePrice = 5;
      break;
    case 'medium':
      sizePrice = 10;
      break;
    case 'large':
      sizePrice = 15;
      break;
  }
  
  var toppingsPrice = 0;
  for (var i = 0; i < toppings.length; i++) {
    toppingsPrice += 2;
  }
  
  var totalPrice = sizePrice + toppingsPrice;
  document.getElementById('totalPrice').textContent = totalPrice;
}

在上述代码中，我们创建了一个包含单选按钮和复选框的表单。当用户点击"Calculate Total"按钮时，调用calculateTotal函数。该函数首先获取选中的单选按钮和复选框的值，并根据选择的不同选项计算总价。最后，将计算得到的总价显示给用户。

这只是一个简单的示例，实际的实现可能会更复杂，具体取决于你的业务需求和设计。在实际项目中，你可能还需要考虑数据验证、错误处理、用户体验等因素。