Javascript 价格计算器问题(复选框)

Question

我在使复选框在选中时显示其值并在未选中时删除其值时遇到了一些麻烦。在此之前，我添加了一个下拉菜单和单选按钮，其中包含报价表单的值。我现在已经添加了带有值的复选框组，但是当在“totalPrice”DIV 末尾添加总金额时，它不会添加到设备的复选框中。下面是 Javascript 和 HTML 代码:

<script>
//ARRAY
var eventEquipmentArray = new Array();
eventEquipmentArray["15 Inch Speakers"]=5;
eventEquipmentArray["18 Inch Subwoofer"]=10;
eventEquipmentArray["LED Par Cans"]=5;
eventEquipmentArray["Smoke Machine"]=5;
eventEquipmentArray["Moving Head"]=10;
eventEquipmentArray["4 Gun Laser System"]=5;
eventEquipmentArray["Red Gun Laser System"]=5;
eventEquipmentArray["1500W Strobes"]=10;
eventEquipmentArray["Mirror LED Lighting"]=5;

//CHECKBOX - EVENT EQUIPMENT
function getEventEquipment()
{
    var EventEquipment = 0;

    var theForm = document.forms["quote"];

    var selectedEquipment = theForm.elements["selectedEquipment"];

    for(var i = 0; i < selectedEquipment.length; i++)
    {
        EventEquipment = EventEquipment + eventEquipmentArray[selectedEquipment[i].value];

        break;
    }

    return EventEquipment;

}

//DIV - TOTAL PRICE TEST
function getTotals()
{
    var totalPrice = getEventDuration() + getEventSuburb() + getEventEquipment();

    var totalPriceDIV = document.getElementById("totalPrice");

    totalPriceDIV.innerHTML = "Total: $"+totalPrice;
}
</script>

<form id="quote" action="" onsubmit="return false;">
<p>
      <label>
        <input type="checkbox" name="selectedEquipment" value="15 Inch Speakers" id="selectedEquipment_0" onChange="getTotals()" />
        15" Speakers</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="18 Inch Subwoofer" id="selectedEquipment_1" onChange="getTotals()" />
        18" Subwoofer</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="LED Par Cans" id="selectedEquipment_2" onChange="getTotals()" />
        LED Par Cans</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="Smoke Machine" id="selectedEquipment_3" onChange="getTotals()" />
        Smoke Machine</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="250W Moving Head" id="selectedEquipment_4" onChange="getTotals()" />
        250W Moving Head</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="Mirror LED Lighting" id="selectedEquipment_5" onChange="getTotals()" />
        Mirror LED Lights</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="4 Gun Laser System" id="selectedEquipment_6" onChange="getTotals()" />
        4 Gun Laser Light</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="Red Gun Laser System" id="selectedEquipment_7" onChange="getTotals()" />
        Red Laser Star Light</label>
      <br />
      <label>
        <input type="checkbox" name="selectedEquipment" value="1500W Strobes" id="selectedEquipment_8" onChange="getTotals()" />
        1500W Strobes</label>
      <br />
    </p>
  <br />

  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>

我将 Javascript 和 HTML 的所有信息放置在下面的 JSFiddle 中: https://jsfiddle.net/dqx5yLz7/

Answer 1

首先，删除 for 中的中断。这只会返回第一个值。

其次，您可以使用element.checked来检查其是否已选中并添加其值。

第三，您正在访问document.forms["quote"];，但没有ID为quote的表单

此外，您的 fiddle 中缺少 getEventDuration()、getEventSuburb() 这些函数。我假设它们与当前场景无关并已对其进行了评论。

你可以尝试这样的事情:

JSFiddle .

//ARRAY
var eventEquipmentArray = new Array();
eventEquipmentArray["15 Inch Speakers"] = 5;
eventEquipmentArray["18 Inch Subwoofer"] = 10;
eventEquipmentArray["LED Par Cans"] = 5;
eventEquipmentArray["Smoke Machine"] = 5;
eventEquipmentArray["Moving Head"] = 10;
eventEquipmentArray["4 Gun Laser System"] = 5;
eventEquipmentArray["Red Gun Laser System"] = 5;
eventEquipmentArray["1500W Strobes"] = 10;
eventEquipmentArray["Mirror LED Lighting"] = 5;

//CHECKBOX - EVENT EQUIPMENT
function getEventEquipment() {
  var EventEquipment = 0;
  var theForm = document.forms["quote"];
  var selectedEquipment = theForm.elements["selectedEquipment"];

  for (var i = 0; i < selectedEquipment.length; i++) {
  	if(selectedEquipment[i].checked){
    	EventEquipment += eventEquipmentArray[selectedEquipment[i].value] || 0;
    }
  }

  return EventEquipment;
}

//DIV - TOTAL PRICE TEST
function getTotals() {
  //var totalPrice = getEventDuration() + getEventSuburb() + getEventEquipment();
  var totalPrice = getEventEquipment();
  var totalPriceDIV = document.getElementById("totalPrice");
  totalPriceDIV.innerText = "Total: $ " + totalPrice;
}

<form id="quote">
  <p>
    <label>
      <input type="checkbox" name="selectedEquipment" value="15 Inch Speakers" id="selectedEquipment_0" onChange="getTotals()" /> 15" Speakers</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="18 Inch Subwoofer" id="selectedEquipment_1" onChange="getTotals()" /> 18" Subwoofer</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="LED Par Cans" id="selectedEquipment_2" onChange="getTotals()" /> LED Par Cans</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="Smoke Machine" id="selectedEquipment_3" onChange="getTotals()" /> Smoke Machine</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="250W Moving Head" id="selectedEquipment_4" onChange="getTotals()" /> 250W Moving Head</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="Mirror LED Lighting" id="selectedEquipment_5" onChange="getTotals()" /> Mirror LED Lights</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="4 Gun Laser System" id="selectedEquipment_6" onChange="getTotals()" /> 4 Gun Laser Light</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="Red Gun Laser System" id="selectedEquipment_7" onChange="getTotals()" /> Red Laser Star Light</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="1500W Strobes" id="selectedEquipment_8" onChange="getTotals()" /> 1500W Strobes</label>
    <br />
  </p>

  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>

</form>