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

>我在使复选框在选中时显示其值并在取消选中时删除其值时遇到一些麻烦。在此之前，我添加了一个下拉菜单和带有报价表单值的单选按钮。我现在已经添加了这个带有值的复选框组，但是当总金额在"总价格"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/

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

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

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

还要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>

我有针对您的问题的jQuery解决方案，希望对您有所帮助。

$(".checkbox").click(function(){
    var favorite = [];
    $.each($('input[type="checkbox"]:checked'), function() {
      favorite.push($(this).val());
      console.log(favorite);
    });
    var total = 0;
    for (var i = 0; i < favorite.length; i++) {
      total += favorite[i] << 0;
    }
    $('#total').html(total);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label class="col-md-2 control-label" for="submit">18 Inch Subwoofer</label>
  <div class="col-md-4">
    <input id="checkbox" name="Subwoofer" realname="18 Inch Subwoofer" type="checkbox" value="10"/>
  </div>
</div>
<div class="checkbox">
  <label for="submit">LED Par Cans</label>
  <div>
    <input id="checkbox" name="LED" type="checkbox" realname="LED Par Cans" value="5"/>
  </div>
</div>
<div class="checkbox">
  <label for="submit">Smoke Machine</label>
  <div >
    <input id="checkbox" name="Smoke Machine" realname="Smoke Machine"type="checkbox" value="5"/>
  </div>
</div>
<div>
  <label for="name">Totalprice: </label>
 
    <p id="total"></p>
</div>

在 for 循环内的函数getEventEquipment()中，您需要添加条件以检查复选框是否被选中并删除 break 语句。修改后的代码如下：

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 = parseInt(EventEquipment, 10) + parseInt(eventEquipmentArray[selectedEquipment[i].value], 10);
         }
     }
     return EventEquipment;
 }

还要确保表单的 ID 已设置为 quote 。

如果您在计数中获得 NaN，请检查您的数组和表单中的值详细信息。

相关内容

最新更新

热门标签：