1. 首页
  2. 问题列表
  3. 获取jQuery中所选单选按钮和复选框的十进制值
提问者：小点点

获取jQuery中所选单选按钮和复选框的十进制值


我从data-attribute中获取值并使用jQuery进行计算。 但它没有显示正确的十进制值。 但在没有十进制值的情况下，它可以正常工作。 谁能帮帮我吗？

null

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

null


共3个答案

匿名用户

由于.toFixed()返回一个字符串值，因此tot+=price；是字符串连接，而不是加法。

在输出中使用.ToFixed():

null

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

匿名用户

加一元运算符返回对象的数字表示形式。 尝试在变量(tot和price)前添加加号(+):

null

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

匿名用户

null

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

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS