Hello, I have a page that has checkboxes with prices of products. When I do OnChange checked or unchecked I update the total of an input field. However, I cannot get the decimals to appear. For example the 1st checkbox is worth $14.25 but when check it only shows $14 in the total input. That is the same for all the checkboxs with values that sum in that "total" input holder.

function checkTotal(){
  document.listForm.total.value = '';
  var sum = 0;
  for (i=0;i<document.listForm.choice.length;i++) {
    if (document.listForm.choice[i].checked) {
      sum = sum + parseInt(document.listForm.choice[i].value).toFixed(2);
    }
  }
  document.listForm.total.value = sum;
}

I also tried parseFloat().toFixed(2). Here is what the checkboxes and total input look like.

echo '<input type="checkbox" name="choice" value="'.$b['currBalance'].'" onChange="checkTotal();"/>';
echo '<input type="text" id="total" name="total" value="0"/>';

I appreciate any insight.

    Does the parseFloat() version work if you change var sum = 0; to var sum = 0.0;? I'm wondering if it's doing type-casting of the float to int if you don't. (I am not a JavaScript power user. 😉 )

      I tried that with no luck.

      function checkTotal(){
  document.listForm.total.value = '';
  var sum = 0.0;
  for (i=0;i<document.listForm.choice.length;i++) {
    if (document.listForm.choice[i].checked) {
      sum = sum + parseFloat(document.listForm.choice[i].value).toFixed(2);
    }
  }
  document.listForm.total.value = parseFloat(sum).toFixed(2);
}

        Number.toFixed returns a string. Adding strings to numbers in JavaScript casts the number to a string and concatenates.

        console.log(                  parseFloat('4.567')            );
> 4.567

console.log(                  parseFloat('4.567').toFixed(2) );
> "4.57"

console.log(           10   + parseFloat('4.567').toFixed(2) );
> "104.57"

console.log(           10.7 + parseFloat('4.567').toFixed(2) );
> "10.74.57"

console.log(parseFloat(10.7 + parseFloat('4.567').toFixed(2)));
> 10.74

        Multiply all incoming prices by 100 and work with integer numbers of cents

        integer number of cents

        Yup, that's the way to handle money in JS.

        Only format it for printing.

          You could also use Numeral.js, though Weedpacket's and dalecosp's suggestions avoid having to require an extra library.

            3 years later

            It seems like toFixed() is a better solution, but it is not! In some cases it will NOT round correctly. Also, Math.round() will NOT round correctly in some cases.

            To correct the rounding problem with the previous Math.round() and toFixed(), you can define a custom JavaScript rounding function that performs a "nearly equal" test to determine whether a fractional value is sufficiently close to a midpoint value to be subject to midpoint rounding. The following function return the value of the given number rounded to the nearest integer accurately.

            Number.prototype.roundTo = function(decimal) {
  return +(Math.round(this + "e+" + decimal)  + "e-" + decimal);
}

var num = 9.7654;
console.log( num.roundTo(2)); //output 9.77
              Write a Reply...