javascript - 计算单选按钮、选择和复选框的值

Question

嗨，我正在为一家披萨店制作菜单(Leaning 项目)，其中用户选择单选按钮，然后选择按钮来计算总数。例如，现在我选择了三个单选按钮，小，中，大。和 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 i.e 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
      //i.e. 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