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

我对您的问题有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> 

Answer 2

首先，删除里面休息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> 

Answer 3

在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，请检查数组和表格中的值详细信息。