1
votes

Obtenir le bouton radio sélectionné et la valeur décimale de la case à cocher dans jQuery

Je prends les valeurs de data-attribute et fais le calcul en utilisant jQuery. Mais il n'affiche pas les valeurs correctes pour les valeurs décimales. Mais cela fonctionne bien sans valeurs décimales. Quelqu'un peut-il m'aider?

<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>

$(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();
});

javascript jquery html

0 commentaires

3 Réponses :

3
votes

Puisque .toFixed () renvoie une valeur de chaîne, tot + = price; est une concaténation de chaînes, pas une addition.

Utilisez .toFixed () en sortie, pas dans les calculs:

<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>

$(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();
});

1 commentaires

Réponse parfaite. Merci beaucoup. Je l'ai également corrigé avant de voir votre réponse.

1
votes

L'opérateur unaire plus renvoie le numérique représentation de l'objet . Essayez d'ajouter un signe plus (+) avant les variables ( tot et price):

<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>

$(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();
});

0 commentaires

1
votes

<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>

$(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();
});

Le prix est traité comme une chaîne lorsqu'il n'y a pas de fraction. J'ai donc converti le prix en nombre tot + = + prix avant de faire la sommation.

0 commentaires