时间戳

首页 > 解决方案 > 如何将我的选择列表、单选和复选框加起来？

javascript - 如何将我的选择列表、单选和复选框加起来？

问题描述

我需要一些关于如何将我的选择列表添加到我的总数的指导。我还是 javascript 的新手，所以我尽我所能，但由于某种原因，我无法弄清楚如何将选择列表添加到我的总数中。带有 0.00 的文本框可供我查看收音机、复选框和选择是否正确添加。

``
`
function customerInfo(cName){
	var dinerName = document.getElementById(cName).value;
	document.getElementById('cust_name').innerHTML = dinerName;
}
// format val to n number of decimal places
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
while (str.length <= n) {
    str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}

function getRadioVal(form, name) {
var radios = form.elements[name];
var val;

for (var i=0, len=radios.length; i<len; i++) {
    if ( radios[i].checked == true ) {
        val = radios[i].value;
        break;
    }
}
return val;
}

function getToppingsTotal(e) {
var form = this.form;
var val = parseFloat( form.elements['tops_tot'].value );

if ( this.checked == true ) {
    val += parseFloat(this.value);
} else {
    val -= parseFloat(this.value);
}

form.elements['tops_tot'].value = formatDecimal(val);
updatePizzaTotal(form);
}

function getSizePrice(e) {
this.form.elements['sz_tot'].value = parseFloat( this.value );
updatePizzaTotal(this.form);
}

function getDeliveryPrice(e){
	selectElement = document.querySelector('#pick_delivery'); 
	output = selectElement.options[selectElement.selectedIndex].value; 
	console.log(output);
}

function updatePizzaTotal(form) {
var sz_tot = parseFloat( form.elements['sz_tot'].value );
var tops_tot = parseFloat( form.elements['tops_tot'].value );
form.elements['total'].value = formatDecimal( sz_tot + tops_tot );
}
// removes from global namespace
(function() {

var form = document.getElementById('pizzaForm');

var el = document.getElementById('pizza_toppings');
	
// input in toppings container element
var tops = el.getElementsByTagName('input');

for (var i=0, len=tops.length; i<len; i++) {
    if ( tops[i].type === 'checkbox' ) {
        tops[i].onclick = getToppingsTotal;
    }
}
	
var sz = form.elements['size'];

for (var i=0, len=sz.length; i<len; i++) {
    sz[i].onclick = getSizePrice;
}

// set sz_tot to value of selected
form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'size') ) );
	
updatePizzaTotal(form);
})(); // end remove from global namespace and invoke
<form name="pizzaOrder" method="post" id="pizzaForm" enctype="text/plain">
  <fieldset style="width: 60%;">
    <legend>Create Your Pizza</legend>
    <h3>Customer's Name:</h3>
    <p>
      <input type="text" name="client_name" id="client_name" value="First and Last Name" size="30" value="" />
      <input type="button" onclick="customerInfo('client_name')" value="Enter"></button>
    </p>
    <h3>Pick Your Size:</h3>
    <p>
      <label><input type="radio" name="size" value="8" /> Small</label>
      <label><input type="radio" name="size" value="10" /> Medium</label>
      <label><input type="radio" name="size" value="12" /> Large</label>
      <label><input type="radio" name="size" value="14" checked/> Extra Large</label>
      <input type="text" name="sz_tot" value="0.00" />
    </p>
    <h3>Pick Your Toppings</h3>
    <p id="pizza_toppings">
      <label><input type="checkbox" name="Pineapple" value="1.50" /> Pineapple</label>
      <label><input type="checkbox" name="Onions" value="1.50" /> Onions	</label>
      <label><input type="checkbox" name="Ham" value="1.50" /> Ham</label>
      <label><input type="checkbox" name="Sausage" value="1.50" /> Sausage</label>
      <label><input type="checkbox" name="Pepperoni" value="1.50" /> Pepperoni</label>
      <input type="text" name="tops_tot" value="0.00" />
    </p>
    <h3>Delivery Or Pick Up</h3>
    <p>
      <select class="delivery" id="pick_delivery" size="2">
        <option value="0">Pick Up: Free</option>
        <option value="2">Delivery: $2</option>
      </select>
      <input type="button" onclick="getDeliveryPrice()" id="delivery_pick" value="enter" /></button>
    </p>
    <p>
      <label>Total: $ <input type="text" name="total" class="num" value="0.00" readonly="readonly" /></label>
    </p>
    <p>
      <a href="result.php" target="_blank"><input type="button" value="Confirm" /></a>
      <a href="cancel.php" target="_blank"><input type="button" value="Cancel"></a>
    </p>
  </fieldset>
</form>
<div>
  <h2>Your Order:</h2>
  <p>
    <h4>Your Name: <span id="cust_name">&nbsp;</span></h4>
    <h4>Your Pizza Size:</h4>
    <h4>Toppings Selected:</h4>
  </p>
</div>
</fieldset>
</form>```

在页面底部，结果应类似于以下内容：

Your Name: Pam Love
Pizza Size Selected: Extra Large
Toppings Selected: Bacon, Pineapple, Ham    
Total:  20.50

单击确认订单时，onclick 按钮应将页面重定向到一个新选项卡，该选项卡显示：

Your order will be ready in 20 minutes.

或者如果取消，则用户单击取消按钮也会重定向到新选项卡：

Your order is cancelled.

标签： javascript

解决方案

您可以使用一些 css 选择器来完成大部分工作。

以下是如何获得您选择的尺寸：

document.querySelector('input[type="radio"][name="size"]:checked').value

以下是获取浇头列表的方法：

[...document.querySelectorAll('input[type="checkbox"][name="topping"]:checked')].map((t) => t.value).join(', ')

使用 querySelector 或 getElementById 应该很容易找到其余的东西

推荐阅读