Question 36005 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to make a total estimate calculator using checkboxes and jquery?

Is there anyone here who thinks they can help me solve an estimate calculator issue?

The user clicks on different checkboxes which stores a price value and for each checkbox they click it adds a total price. I got that working. But I cant find a way to give the checkbox a range price to display to the user

like this

This is mine, i put in plane text the range, but the value is actually only the first portion of the range unfortunately and I’m not getting to display the range
enter image description here

This is what is the code i tried:
`

   <p class = "dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
    <div id = "test"></div>
    </div>
    <br>
    <!--Services with prices-->
        <form action="" method="post" id= "engineRepair-form"  class="price-form">
            <table>
                <tr>
                    <td class="services-row">
                        
                        <input type="checkbox" name="array[]" id="oil" value="2126.15">
                        <label for="oil">Air Filter</label>
                    </td>
                    <td class = "price">
                    $2,126.15 - $2,622.25
                    </td>
                </tr>
                <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="gas" value="1063.08">
                        <label for="gas">Gas Filter</label>
                    </td>
                    <td class = "price">
                    $1,063.08 - $1,275.69
                    </td>
                </tr>
                <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="tires" value = "3614.46">
                        <label for="tires">Fuel Filter</label>
                    </td>
                    <td class = "price">
                    $3,614.46 - $4,394.05
                    </td>
                </tr>
            <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="sparkPlug" value = "5244.51">
                        <label for="sparkPlug">Spark Plug</label>
                    </td>
                    <td class = "price">
                    $5,244.51 - $6,449.33
                    </td>
                </tr>
            <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="belt_chain" value = "9355.07">
                        <label for="belt_chain">Timing Belt/Chain</label>
                    </td>
                    <td class = "price">
                    $9,355.07 - $1,1410.35
                    </td>
                </tr>
            <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="belt_drive" value = "3685.33">
                        <label for="belt_drive">Fan Belt/Drive Belt</label>
                    </td>
                    <td class = "price">
                    $3,685.33 - $4,323.18
                    </td>
                </tr>
            <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="radiatorHoseSet" value = "7228.92">
                        <label for="radiatorHoseSet">Radiator Hose Set</label>
                    </td>
                    <td class = "price">
                    $7,228.92 - $8,858.97
                    </td>
                </tr>
                <tr>
                    <td class="service">
                        <input type="checkbox" name="array[]" id="radiator" value = "27214.74">
                        <label for="radiator">Radiator</label>
                    </td>
                    <td class = "price">
                    $27,214.74 - $33,309.71
                    </td>
                </tr>
            </table>
        </form>

`

Javascrip:
`

$(function() {
  $('input').click(function() {
    var total = 0;
    $('input:checked').each(function(index, item) {
      total += parseFloat(item.value);
    });
    $('#test').text(total.toFixed(2));
  });
});

`

As you can see, the prices did add but it didn’t display the range as showed in the first image I sent. It’s supposed to display the total estimated price range

enter link description here

this is also the codepen

Tags:

2

Answers


  1. 0

    Here is this Answer
    i used parentElement and NextSilbiling

    $(function() {
  $('input').click(function() {
    var total1 = 0;
    var total2 = 0;
    $('input:checked').each(function(index, item) {
      var items = item.parentElement.nextElementSibling.innerText.replace(/[$, ]/g,'').split("-");
      total1 += Number(items[0]);
      total2 += Number(items[1]);
    });
    $('#costOutput').text('$'+total1.toFixed(2)+' - '+ '$'+total2.toFixed(2));
  });
});

    https://bokboot.net/read?id=47&key=b3897fd0-315c-410d-ab2a-f61b8e8c4a4a

    Copy and Paste in your project

    Login or Signup to reply.
  2. 0

    First things first, please do not use the table tag for layout. It should be used for tabular data only. Its use for layout went out of style at the turn of the century!

    Now, onto the problem at hand. As you’ve discovered, checkboxes can only have one value. We are going to leverage data attributes to give your more.

    $(function() {
  $('input').click(function() {
    var minTotal = 0;
    var maxTotal = 0
    $('input:checked').each(function(index, item) {
      //Add the value from the minval data attribute
      minTotal += parseFloat(item.dataset.minval);
      //Add the value from the maxval data attribute
      maxTotal += parseFloat(item.dataset.maxval); 
    });
    //Update the text field
    $('#test').text("$" + minTotal.toFixed(2) + " - $" + maxTotal.toFixed(2) );
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id="test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id="engineRepair-form" class="price-form">
  <table>
    <tr>
      <td class="services-row">
        <input type="checkbox" name="array[]" id="oil" data-minval="2126.15" data-maxval="2622.25" value="skuOil">
        <label for="oil">Air Filter</label>
      </td>
      <td class="price">
        $2,126.15 - $2,622.25
      </td>
    </tr>
    <tr>
      <td class="service">
        <input type="checkbox" name="array[]" data-minval="1063.08" data-maxval="1275.69" id="gas" value="skuGas">
        <label for="gas">Gas Filter</label>
      </td>
      <td class="price">
        $1,063.08 - $1,275.69
      </td>
    </tr>
  </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search