Get selected radio button and checkbox decimal value in jQuery

Question

I take the values from data-attribute and do the calculation using jQuery. But it's not showing the correct values for decimal values. But it is working fine for without decimal values. Can anyone help me out?

$(document).ready(function() {
  $('#optionfood').on('change', function() {
    update_total();
  });

  function update_total() {
    var tot = 0;
    var price = 0;
    $('#optionfood input:checked').each(function() {
      price = parseFloat($(this).data('price')).toFixed(2);
      if (price > 0) {
        tot += price;
      }
    });
    $('#optionfood select').each(function() {
      price = parseFloat($("option:selected", this).data('price')).toFixed(2);
      if (price > 0) {
        tot += price;
      }
    });
    $('.modlcstmtotal').html(tot);
  }
  update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30" data-price="30.00"><label for="choice2" class="width100">30.00</label>

<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

score 3 · Accepted Answer · answered Jun 20 '20 at 14:16

Since .toFixed() returns a string value, tot += price; is string concatenation, not addition.

Use .toFixed() in output, not in calculations:

$(document).ready(function() {
  $('#optionfood').on('change', function() {
    update_total();
  });

  function update_total() {
    var tot = 0;
    var price = 0;
    $('#optionfood input:checked').each(function() {
      price = parseFloat($(this).data('price'));
      if (price > 0) {
        tot += price;
      }
    });
    $('#optionfood select').each(function() {
      price = parseFloat($("option:selected", this).data('price'));
      if (price > 0) {
        tot += price;
      }
    });
    $('.modlcstmtotal').html(tot.toFixed(2));
  }
  update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30" data-price="30.00"><label for="choice2" class="width100">30.00</label>

<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

Perfect answer. Thank you so much. I also fixed it before seen your answer. — acmsohail, Jun 20 '20 at 14:51

score 1 · Answer 2 · answered Jun 20 '20 at 14:17

The plus unary operator returns the numeric representation of the object. Try adding a plus (+) before the variables (tot and price):

$(document).ready(function() {
  $('#optionfood').on('change', function() {
    update_total();
  });

  function update_total() {
    var tot = 0;
    var price = 0;
    $('#optionfood input:checked').each(function() {
      price = parseFloat($(this).data('price')).toFixed(2);
      if (price > 0) {
        tot += +price;
      }
    });
    $('#optionfood select').each(function() {
      price = parseFloat($("option:selected", this).data('price')).toFixed(2);
      if (price > 0) {
        tot += +price;
      }
    });
    $('.modlcstmtotal').html(tot);
  }
  update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30" data-price="30.00"><label for="choice2" class="width100">30.00</label>

<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

score 1 · Answer 3 · answered Jun 20 '20 at 14:46

$(document).ready(function() {
  $('#optionfood').on('change', function() {
    update_total();
  });

  function update_total() {
    var tot = 0;
    var price = 0;
    $('#optionfood input:checked').each(function() {
      price = parseFloat($(this).data('price'));
      if (price > 0) {      
        tot += +price;
      }
    });
    $('#optionfood select').each(function() {
      price = parseFloat($("option:selected", this).data('price')).toFixed(2);
      if (price > 0) {
        tot += price;
      }
    });
    $('.modlcstmtotal').html(tot.toFixed(2));
  }
  update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30.5" data-price="30.00"><label for="choice2" class="width100">30.00</label>

<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

The price is treated as a string when there is no fraction. So I converted the price to number tot += +price before doing the summation.

Get selected radio button and checkbox decimal value in jQuery

3 Answers3