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，請檢查數組和表格中的值詳細信息。