Javascript Price Calculator Issues (Checkboxes)

Question

I am having a bit of trouble making the checkboxes display their values when checked and removing their value when unchecked. Before this I added a drop-down menu and radio buttons with values for a quote form. I have now added this checkbox group with values, however when the total amount is added at the end in the "totalPrice" DIV, it doesnt add in the checked boxes for the Equipment. Below is the Javascript and HTML code:

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

I have all the information of the Javascript and HTML placed in a JSFiddle below: https://jsfiddle.net/dqx5yLz7/

Answer 1

i have jQuery solution for your problem i hope it helps.

 $(".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

First, remove break inside for . This will only return 1st value.

Second, you can use element.checked to check if its checked and add its value.

Third, you are accessing document.forms["quote"]; , but there is no form with id quote

Also getEventDuration() , getEventSuburb() these functions are missing in your fiddle. I'm assuming that they were not relevant for current scenario and have commented them.

You can try something like this:

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

In the function getEventEquipment() inside the for loop you need to add the condition to check whether the check box is selected or not and remove the break statement. The altered code is below :

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;

 }

Also make sure the form's id has been set to quote .

If you get NaN in the count please check your array and the value details in the form.