Javascript 带有单选按钮的jquery计算

大家好，我的社区

我目前正在尝试实现以下功能：在我的一个项目中，主要区别在于我没有使用选择选项，而是使用输入字段/单选按钮

请查看我的代码：

    <li id="fo143li1" class="notranslate focused">
        <fieldset>
        <div class="price-option">
        <input id="radioDefault_1" name="Field1" type="hidden" value="">
            <span>
            <div class="price" style="float: right; margin-top: 5px;"></div>
        <input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
        <label class="choice" for="Field1_0">
            First Choice</label>
            </span>
            <span>
            <div class="price" style="float: right; margin-top: 5px;">300 USD</div>
        <input id="Field1_1" name="Field1" type="radio" class="field radio" value="Second Choice" tabindex="2">
        <label class="choice" for="Field1_1">
            Second Choice</label>
            </span>
            <span>
            <div class="price" style="float: right; margin-top: 5px;">300 USD</div>
        <input id="Field1_2" name="Field1" type="radio" class="field radio" value="Third Choice" tabindex="3">
        <label class="choice" for="Field1_2">
            Third Choice</label>
            </span>
            </div>
        </fieldset>
        </li>
        </ul>
    </form>

    <p class="result" data-base-price="50">&pound;<span>50.00</span></p>

首选
300美元
第二选择
300美元
第三选择


£；50.00

这里是我编辑的jquery部分：

    <script type="text/javascript">
    $(document).ready(function () {
        $('.price-option').change(function(){
            var price = parseFloat($('.price').data('base-price'));

            $('.price-option').each(function(i, el) {
                price += parseFloat($('checked:checked', el).data('price'));
            });

            $('.result span').text(price.toFixed(2));
        }); 
    });
    </script>

$（文档）.ready（函数（）{
$（'.price option'）.change（函数（）{
var price=parseFloat（$（'.price'）.data（'base-price'））；
$（'.price option'）。每个（函数（i，el）{
price+=parseFloat（$（'checked:checked'，el）.data（'price'）；
});
$（'.result span'）.text（price.toFixed（2））；
}); 
});

如果基于上面的标记尝试此方法，则返回一个NaN值。 你知道我该怎么做吗？如果能得到一些专家的帮助，我们将不胜感激

<li id="fo143li1" class="notranslate focused">
    <fieldset>
    <div class="price-option">
    <input id="radioDefault_1" name="Field1" type="hidden" value="">
        <span>
        <div class="price" style="float: right; margin-top: 5px;"></div>
    <input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
    <label class="choice" for="Field1_0">
        First Choice</label>
        </span>
        <span>
        <div class="price" style="float: right; margin-top: 5px;">300 USD</div>
    <input id="Field1_1" name="Field1" type="radio" data-price="10" class="field radio" value="Second Choice" tabindex="2">
    <label class="choice" for="Field1_1">
        Second Choice</label>
        </span>
        <span>
        <div class="price" style="float: right; margin-top: 5px;">300 USD</div>
    <input id="Field1_2" name="Field1" type="radio" class="field radio" data-price="15" value="Third Choice" tabindex="3">
    <label class="choice" for="Field1_2">
        Third Choice</label>
        </span>
        </div>
    </fieldset>
    </li>
    </ul>
</form>

<p class="result" data-base-price="50">&pound;<span>50.00</span></p>

检查小提琴 这里

检查小提琴

---

这里

这里有一把小提琴，它使用无线电列表来更新价格

HTML:

<input id="1" name="1" type="radio"  value="5" tabindex="1" class="price-option">
<label for="1">Plus 5</label>

<input id="2" name="1" type="radio"  value="10" tabindex="1" class="price-option">
<label for="2">Plus 10</label>

<p>£<span id="price" base-price="50">50</span></p>

---

这里有一个小提琴使用无线电列表来更新价格

HTML:

<input id="1" name="1" type="radio"  value="5" tabindex="1" class="price-option">
<label for="1">Plus 5</label>

<input id="2" name="1" type="radio"  value="10" tabindex="1" class="price-option">
<label for="2">Plus 10</label>

<p>£<span id="price" base-price="50">50</span></p>

---

你能贴出正确的标记吗？你能贴出正确的标记吗？这太棒了，非常感谢阿南特·达比特先生。这太棒了，非常感谢阿南特·达比特先生。非常感谢你的帮助！非常感谢Adween-非常感谢您的帮助！

$(function () {
    $('.price-option').change(function(){
        var price = parseFloat($('#price').attr('base-price'));            

        price += parseFloat($('.price-option:checked').val());

        $('#price').text(price.toFixed(2));
    }); 
});