在 jQuery 中使用单选值计算价格

Question

显然这应该做，但不起作用：

http://jsfiddle.net/9baeJ/

HTML：

<form id="myForm">
    <label>
        20
        <input id="fb3" type="radio" name="fb1" value="20" />
    </label>

    <label>
        35
        <input id="fb4" type="radio" name="fb1" value="35" />
    </label>

    <label>
         10
         <input id="fb1" type="radio" name="fb" value="10" />
     </label>

    <label>
        15
        <input id="fb2" type="radio" name="fb" value="15" />
    </label>
    <br/>
    Total: <span id="totalScore">0</span>€
</form>

还有js：

var sum = 0;
$("#myForm").find("input[type='radio']:checked").each(function (i, e){sum+=$(e).val();});
$("#totalScore").val(sum);

我尝试了在 stackoverflow 中看到的所有内容，但我不明白代码有什么问题。实际上，此解决方案是有人已经发布的示例之一。

Answer 1

试试这个

function calcscore(){
    var score = 0;
    $("input[type='radio']:checked").each(function(){
        score+=parseInt($(this).val());
    });
    $("#totalScore").text(score)
}
$().ready(function(){
    $("input[type='radio']").change(function(){
        calcscore()
    });
});

DEMO

Answer 2

Span 没有值，必须使用 .text() 或 .html()。您还需要使用 DOM 就绪处理程序包装代码。

试试这个

$(function(){
    $('#myForm input[type="radio"]').on('change', function () {
        var sum = 0;
        $("#myForm").find("input[type='radio']:checked").each(function () {
            sum += parseInt(this.value);
        });
        $("#totalScore").text(sum);
    });
});

DEMO