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

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"  >
            <table>
                <tr>
                    <td >
                        
                        <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 >
                        <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 >
                        <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 >
                        <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 >
                        <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 >
                        <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 >
                        <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 >
                        <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

CodePudding user response：

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

Now, onto the problem at hand. As you've discovered, check boxes 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) {
      console.log(item.dataset.minval, item.dataset.maxval)
      minTotal  = parseFloat(item.dataset.minval);
      maxTotal  = parseFloat(item.dataset.maxval); 
    });
    $('#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 >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" >
  <table>
    <tr>
      <td >
        <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 >
        $2,126.15 - $2,622.25
      </td>
    </tr>
    <tr>
      <td >
        <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 >
        $1,063.08 - $1,275.69
      </td>
    </tr>
  </table>

CodePudding user response：

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