Update price shown onchange

Question

I am simply trying to get a price shown, to update on an onchange event. Right now, this is only just showing me both values of the onchange ids I'd just like to have someone click a check box and then it updates the price that was already shown to the new value.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 </head>
 <body>
 <table>
    <tr>
      <td>
      <input type="checkbox" id="extras" value="25.00" onChange="calc()">
      </td>
     <td>
      <input type="checkbox" id="rush" value="35.00" onChange="calc()">
      </td>
      <td>
           <input id="total" type="text" value="90.00" />
      </td>
 </tr>
 </table>
 </body>
 <script type='text/javascript'>
      function calc() {    
          var extras = document.getElementById('extras').value;
          var rush  = document.getElementById('rush').value;
          var result = document.getElementById("total");
          result.value = extras + rush;
      }
 </script>
 </html>

there are so many duplicates of this question. use jquery and check this link out: http://stackoverflow.com/questions/4813219/jquery-checkbox-value — Mutu Yolbulan, May 09 '14 at 02:33
http://stackoverflow.com/questions/21442833/javascript-add-checkbox-checked-values — fasouto, May 09 '14 at 02:39
Let me explain a bit further. I have a php script that shows a price already. ($90.00) Then there's two check boxes, one for extras, one for rush. When someone checks one, it should take the $90 and add the value from extras/rush or both. — MrTechie, May 09 '14 at 02:43

score 2 · Accepted Answer · answered May 09 '14 at 02:47

You can do:

$('input[type=checkbox]').change(function () {
    var val = parseFloat(this.value),
        totalVal = parseFloat($('#total').val());
    if (this.checked) {
        $('#total').val((totalVal + val).toFixed(2));
    } else {
        $('#total').val((totalVal - val).toFixed(2));
    }
});

Fiddle Demo

score 0 · Answer 2 · answered May 09 '14 at 02:38

a non jquery solution could be to check for checked value. You also need to convert the value which is text to float otherwise it won't be a valid sum but just concatenation of strings.

var extrasCB = document.getElementById('extras');
var extras = 0;
if(extrasCB.checked) {
    extras = parseFloat( extrasCB.value );
}

Update price shown onchange

2 Answers2