HTML单选框绑定onblur事件计算分数时取值为上一次选中值如何解决

问题根因 #

你绑定的触发事件不符合需求：onblur 是元素失去焦点时才会触发，点击单选框选中后，当前元素仍持有焦点，只有点击其他元素、当前单选框失去焦点时才会执行计算逻辑，因此每次展示的都是上一次触发blur时的选中值。
另外你提供的JS代码还存在函数未闭合的语法问题，缺少}收尾。

修复方案 #

把所有单选框上的onblur="getTotal()"替换为onchange="getTotal()"即可，onchange 会在单选框的选中状态发生变更时立即触发，能实时拿到当前最新的选中值，同时补全JS函数的闭合符号。

修复后完整代码 #

<form>
        <input type="radio" id="age0" name="age" value="20" onchange="getTotal()">age 18 &nbsp 20 marks<br>
        <input type="radio" id="age1" name="age" value="30" onchange="getTotal()">age 19 &nbsp 30 marks <br>
        <input type="radio" id="age2" name="age" value="40" onchange="getTotal()">age 20 &nbsp 40marks <br><br>
</form>
<form>
        <input type="radio" id="language0" name="language" value="48" onchange="getTotal()"> IELTS(4.5、4.0、3.5、4.0)&nbsp 48 marks <br>
        <input type="radio" id="language1" name="language" value="68" onchange="getTotal()"> IELTS(5.0、5.0、4.0、5.0）&nbsp 68 marks <br>
        <input type="radio" id="language2" name="language" value="80" onchange="getTotal()"> IELTS(5.5、5.5、5.0、5.5）&nbsp 80 marks <br>
        <input type="radio" id="language3" name="language" value="88" onchange="getTotal()"> IELTS(6.0、6.0、6.0、6.0）&nbsp 88 marks <br>
        <input type="radio" id="language4" name="language" value="100" onchange="getTotal()"> IELTS(7.5、6.5、6.5、6.5）&nbsp 100 marks <br><br>
</form>
    age marks： &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type = "text" id="totalAge"> <br><br>
    IELTS marks： &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type = "text" id="totalLang"> <br><br>
    total marks： <input type = "text" id="total"> <br><br><br>


<script>
function getTotal() {
    var theAge = document.getElementsByName('age');
    var theLang = document.getElementsByName('language');
    var totalAge = 0;
    var totalLang = 0;
    
    for (var i = 0; i < theAge.length; i++) {
        if (theAge[i].checked) {
            totalAge = theAge[i].value;
        }
    }
    for (var i = 0; i < theLang.length; i++) {
        if (theLang[i].checked) {
            totalLang = theLang[i].value;
        }
    }
    document.getElementById('totalAge').value = totalAge;
    document.getElementById('totalLang').value = totalLang;
    document.getElementById('total').value = parseInt(totalAge) + parseInt(totalLang);
}
</script>

内容的提问来源于stack exchange，提问作者user13571809