Question

我创建了一个订单表格，并试图使其正常运行，以便它将计算总成本。当选择了蛋糕类型时，它可以工作，但是当我尝试从单选按钮中添加值时，它就坏了。单选按钮供用户决定是否要在蛋糕上放照片。

这是html：

<label>Cake Type
<div class="select-style">
<select id="cake_type" class="cake_type" name="cake_type" required>
<option value="0" selected="selected">Select One</option>
<option value="5" >Round Golf Course</option>
<option value="10" >Oblong Football Pitch</option>
<option value="15" >Round Chocolate Sweetie</option>
<option value="20" >Round White Chocolate Sweetie</option>
<option value="25" >Round Unicorn Cake</option>
<option value="30" >Round Drip Cake</option>
<option value="35" >Football Cake</option>
<option value="40"> Yum Yum Cake</option>
<option value="45" >Oblong Carrot Cake</option>
<option value="50" >Round AFC Cake</option>
<option value="55" >Square 8" Cake</option>
<option value="60" >Oblong Cake</option>
</select>
</label> 
</div>

<p>Would you like a photo on your cake?(£7)</p>
<div>
<label class="checkbox-inline"></label>
    <input type="radio" name="photo[]" id="photo[]" value="7">Yes
</label>
<label class="checkbox-inline">
<input type="radio" name="photo[]" id="photo[]" value="0"/>No
</div>

 <input type="text" name="total"  id="totalPrice" value="£0" readonly="readonly" size="8">

这是我目前使用的jQuery：

<script>
$(document).ready(function() {
    $(document).on('change', '.cake_type', '.photo', function() {
        var cakeType, finalTotal;
        cakeType = $(' #cake_type option:selected ').val();
        photo = $('#photo option:checked').val(); 
        finalTotal = parseFloat(cakeType) + parseFloat(photo); 
        $(' #totalPrice ').val('£' + finalTotal.toFixed(2));
    });
});

</script>

在选择“是”或“否”时，价格没有任何变化，但是当选择了蛋糕类型的选项时，将显示NaN。如果我只有：

<script>
$(document).ready(function() {
    $(document).on('change', '.cake_type', function() {
        var cakeType, finalTotal;
        cakeType = $(' #cake_type option:selected ').val(); 
        finalTotal = parseFloat(cakeType); 
        $(' #totalPrice ').val('£' + finalTotal.toFixed(2));
    });
});

</script>

它将正常工作，因此必须与以下行有关：

photo = $('#photo option:checked').val();

但是我不知道这是什么，任何帮助将不胜感激

Answer 1

尝试一下：

<label>Cake Type
<div class="select-style">
<select id="cake_type" class="cake_type forminput" name="cake_type" required>
<option value="0" selected="selected">Select One</option>
<option value="5" >Round Golf Course</option>
<option value="10" >Oblong Football Pitch</option>
<option value="15" >Round Chocolate Sweetie</option>
<option value="20" >Round White Chocolate Sweetie</option>
<option value="25" >Round Unicorn Cake</option>
<option value="30" >Round Drip Cake</option>
<option value="35" >Football Cake</option>
<option value="40"> Yum Yum Cake</option>
<option value="45" >Oblong Carrot Cake</option>
<option value="50" >Round AFC Cake</option>
<option value="55" >Square 8" Cake</option>
<option value="60" >Oblong Cake</option>
</select>
</label>
</div>

<p>Would you like a photo on your cake?(£7)</p>
<div>
<label class="checkbox-inline"></label>
    <input type="radio" name="photo" id="photo" class="forminput" value="7">Yes
</label>
<label class="checkbox-inline">
<input type="radio" name="photo" id="photo" class="forminput" value="0" selected/>No
</div>

 <input type="text" name="total"  id="totalPrice" value="£0" readonly="readonly" size="8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
    $(document).on('change', '.forminput', function() {
        var cakeType, finalTotal;
        cakeType = $(' #cake_type option:selected ').val();
        photo = $('#photo:checked').val();
        finalTotal = parseFloat(cakeType) + parseFloat(photo);
        $(' #totalPrice ').val('£' + finalTotal.toFixed(2));
    });
});
 </script>

Answer 2

NaN的原因是，当未选中单选按钮时，该值不是int，则总和为NAN。

检查我的更改：

https://jsfiddle.net/1kpu5qft/2/

// find elements
$(document).ready(function() {
    $(document).on('change', '.cake_type,.photo', function() {
        var cakeType, finalTotal;
        cakeType = $(' #cake_type option:selected ').val();

        photo = $('input[name="photo[]"]:checked').val(); 
        if(!photo)
            photo = 0;
        finalTotal = parseFloat(cakeType) + parseFloat(photo); 
        $(' #totalPrice ').val('£' + finalTotal.toFixed(2));
    });
});

Answer 3

首先将您的html输入更改为此：

<label class="checkbox-inline">
    <input type="radio" name="photo" checked  class='photo' value="7">Yes
</label>
<label class="checkbox-inline">
<input type="radio" name="photo" class='photo' value="0"/>No
  </label>

还有您的脚本：

$(document).ready(function() {
    $(document).on('change', '.cake_type,.photo', function() {
        var cakeType, finalTotal, photo;
        cakeType = $('.cake_type').val();
        photo = $('.photo:checked').val(); 
        finalTotal = parseFloat(cakeType) + parseFloat(photo); 
        $(' #totalPrice ').val('£' + finalTotal.toFixed(2));
    });
    });

您使用了“ #photo”，但没有这样的ID，并且一页上不应有相同的ID。关于NaN，默认情况下未选中任何广播，因此代码：

$('.photo:checked').val(); // returns NaN

尝试一下，让我知道是否可以帮忙。

计算订单总额

3 个答案: