計算單選按鈕，選擇和復選框的值

Question

嗨，我正在做一個披薩店（傾斜項目）的菜單，用戶在其中選擇單選按鈕，然后通過選擇按鈕來計算總數。 在實例中，我選擇了三個單選按鈕，分別是中號和大號。 和3個選擇框。 每次選擇選擇框，將在所選單選按鈕給定值的價格上增加£1。 例如，如果某些人選擇了4英鎊的小單選按鈕，那么他們選擇接下來的三個選擇框，總計7英鎊，每個選擇框應立即顯示在屏幕上。 我還沒有添加復選框，因為我注意到它不起作用。 我從在線教程中獲得了原始腳本，該腳本在我測試時可以正常工作。 但是，在試圖修改它以適應整個價格之后，顯示總價格的潛水似乎無法正常工作。

 < body onload = 'hideTotal()' > < div id = "wrap" > < form action = "" id = "pizzaform" onsubmit = "return false;" > < div > < div class = "cont_order" > < fieldset > < legend > Make your Pizza! < /legend> <label >Size Of the Pizza</label > < br / > Small Pizza 7 "(£4) <label class='radiolabel'><input type=" radio " name=" selectedpizza " value=" Round1 " onclick=" calculateTotal() " />Round </label><br /> Large 11" (£6) < label class = 'radiolabel' > < input type = "radio" name = "selectedpizza" value = "Round2" onclick = "calculateTotal()" / > Round < /label><br / > Midum 15 "(£8) <label class='radiolabel'><input type=" radio " name=" selectedpizza " value=" Round3 " onclick=" calculateTotal() " />Round </label><br /> <br /> <label >Sacuce</label> <select id=" sauce " name='sauce' onchange=" calculateTotal() "> <option value=" None ">Select Sacuce</option> <option value=" Enzo 's classic Sauce">Enzo' s classic Sauce(£1) < /option> <option value="Spicy Tomato">Spicy Tomato(£1)</option > < /select> <br / > < label > Base < /label> <select id="base" name='base' onchange="calculateTotal()"> <option value="None">Select Base</option > < option value = "Thin and cripy" > Thin and cripy(£1) < /option> <option value="Deep Pan">Deep Pan(£1)</option > < option value = "Stuffed Crust" > Stuffed Crust(£1) < /option> </select > < br / > < label > Cheese < /label> <select id="cheese" name='cheese' onchange="calculateTotal()"> <option value="None">Select cheese</option > < option value = "Mozzarella" > Mozzarella(£1) < /option> <option value="Reduced Fat">Reduced Fat(£1)</option > < /select> <br / > < div id = "totalPrice" > < /div> </fieldset > < /div> </div > < /form> </div > <!--End of wrap--> < script language = "javascript" type = "text/javascript" > /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the Pizza //The values represent the cost of the Pizza ie A 15" Pizza cost's £8 var pizza_prices = new Array(); pizza_prices["Round1"] = 4; pizza_prices["Round2"] = 6; pizza_prices["Round3"] = 8; var sacuce_prices = new Array(); sacuce_prices["None"] = 0; sacuce_prices["Enzo's classic Sauce"] = 1; sacuce_prices["Spicy Tomato"] = 1; var base_prices = new Array(); base_prices["None"] = 0; base_prices["Thin and cripy"] = 1; base_pricess["Deep Pan"] = 1; base_pricess["Stuffed Crust"] = 1; var cheese_prices = new Array(); cheese_prices["None"] = 0; cheese_prices["Mozzarella"] = 1; cheese_prices["Reduced Fat"] = 1; // getPizzaSizePrice() finds the price based on the size of the Pizza. // Here, we need to take user's the selection from radio button selection function getPizzaSizePrice() { var pizzaSizePrice = 0; //Get a reference to the form id="pizzaform" var theForm = document.forms["pizzaform"]; //Get a reference to the Pizza the user Chooses name=selectedPizza": var selectedPizza = theForm.elements["selectedpizza"]; //Here since there are 4 radio buttons selectedPizza.length = 4 //We loop through each radio buttons for (var i = 0; i < selectedPizza.length; i++) { //if the radio button is checked if (selectedPizza[i].checked) { //we set PizzaSizePrice to the value of the selected radio button //ie if the user choose the 8" Pizza we set it to 6 //by using the pizza_prices array //We get the selected Items value //For example pizza_prices["Round2".value]" pizzaSizePrice = pizza_prices[selectedPizza[i].value]; //If we get a match then we break out of this loop //No reason to continue if we get a match break; } } //We return the PizzaSizePrice return PizzaSizePrice; } function getPizzaSacucePrice() { var pizzaSaucePrice = 0; //Get a reference to the form id="cakeform" var theForm = document.forms["pizzaform"]; //Get a reference to the select id="sauce" var selectedSauce = theForm.elements["sauce"]; //set pizzaSauce Price equal to value user chose //For example sauce_prices pizzaSaucePrice = sauce_prices[selectedSauce.value]; //finally we return pizzaSaucePrice return PizzaSaucePrice; } function getBasePrice() { var pizzaBasePrice = 0; //Get a reference to the form id="pizzaform" var theForm = document.forms["pizzaform"]; //Get a reference to the select id="base" var selectedBauce = theForm.elements["base"]; //set pizzaBase Price equal to value user chose //For example base_prices pizzaBaseePrice = base_prices[selectedBase.value]; //finally we return pizzaSaucePrice return pizzaBasePrice; } function getCheesePrice() { var pizzaCheesePrice = 0; //Get a reference to the form id="pizzaform" var theForm = document.forms["pizzaform"]; //Get a reference to the select id="cheese" var selectedCheese = theForm.elements["cheese"]; //set pizzaCheese Price equal to value user chose //For example cheese_prices pizzaBaseePrice = cheese_prices[selectedSauce.value]; //finally we return pizzaCheesePrice; return PizzaCheesePrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var pizzaPrice = getPizzaSizePrice() + getSacucePrice() + getBasePrice() + getCheesePrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display = 'block'; divobj.innerHTML = "Total Price For the Pizza £" + pizzaPrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display = 'none'; } < /script> 

 <body onload='hideTotal()'> <div id="wrap"> <form action="" id="pizzaform" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <legend>Make your Pizza!</legend> <label>Size Of the Pizza</label> <br />Small Pizza 7"(£4) <label class='radiolabel'> <input type="radio" name="selectedpizza" value="Round1" onclick="calculateTotal()" />Round</label> <br />Large 11"(£6) <label class='radiolabel'> <input type="radio" name="selectedpizza" value="Round2" onclick="calculateTotal()" />Round</label> <br />Midum 15"(£8) <label class='radiolabel'> <input type="radio" name="selectedpizza" value="Round3" onclick="calculateTotal()" />Round</label> <br /> <br /> <label>Sacuce</label> <select id="sauce" name='sauce' onchange="calculateTotal()"> <option value="None">Select Sacuce</option> <option value="Enzo's classic Sauce">Enzo's classic Sauce(£1)</option> <option value="Spicy Tomato">Spicy Tomato(£1)</option> </select> <br /> <label>Base</label> <select id="base" name='base' onchange="calculateTotal()"> <option value="None">Select Base</option> <option value="Thin and cripy">Thin and cripy(£1)</option> <option value="Deep Pan">Deep Pan(£1)</option> <option value="Stuffed Crust">Stuffed Crust(£1)</option> </select> <br /> <label>Cheese</label> <select id="cheese" name='cheese' onchange="calculateTotal()"> <option value="None">Select cheese</option> <option value="Mozzarella">Mozzarella(£1)</option> <option value="Reduced Fat">Reduced Fat(£1)</option> </select> <br /> <div id="totalPrice"></div> </fieldset> </div> </div> </form> </div> <!--End of wrap--> 

有人可以幫忙嗎？ 我還計划使用復選框為用戶提供10種澆頭的選擇，是否有限制用戶的方式，所以他們只能從10種選擇中選擇4種？

Answer 1

數據屬性對於這兩個目的均適用。

計算總數

在收音機，復選框和選項上使用data-price ：

<form id="my-form">
  <input type="radio" data-price="100" name="radio">Add 1GBP
  <input type="radio" data-price="200" name="radio">Add 2GBP

  <select>
    <option>Select something</option>
    <option data-price="300">Add 3GB</option>
    <option data-price="400">Add 4GB</option>
  </select>
</form>

Total: <span id="my-total"></span>

然后在每次頁面加載和使用jQuery進行表單更改時計算它們：

$('#my-form').on('change', function(){
  update_total();
});
function update_total(){
  var tot = 0;
  var price = 0;
  $('#my-form input:checked').each(function(){
    price = $(this).data('price');
    if(price > 0){
      tot += price;
    }
  });
  $('#my-form select').each(function(){
    price = $("option:selected", this).data('price');
    if(price > 0){
      tot += price;
    }
  });
  $('#my-total').html(tot);
}
update_total();

限制復選框

使用data-max-check定義可在給定容器中選中的最大復選框數：

<div data-max-check="4">
  <input type="checkbox">
  <input type="checkbox">...

然后使用jQuery阻止用戶選擇超出最大值的選項：

$('[data-max-check] input[type=checkbox]').on('click', function(e){
  var $parent = $(this).closest('[data-max-check]');
  var max = $parent.data('max-check');
  var chk = $parent.find('input[type=checkbox]:checked').size();
  if(chk > max){
    alert('You can only select up to ' + max);
    e.preventDefault();
  }
});

演示

您可以在此處看到兩者的作用： JSFiddle