html单选按钮触发事件,radio按钮使⽤onclick和onfocus触发事
件的区别
做了⼀个计算运费的⼩应⽤，当点选地区的时候触发计算函数，计算函数会获取该地区对应的value，最后算出总运费。但当我使⽤onfocus事件来触发函数的时候，获取到的value是上⼀次的value，如下图，默认⼴州(value=1)为checked，当点击上海(value=4)的时候，打印出来的却是1(本应该是4)，使⽤onclick事件或者再点击⼀次上海就正常(打印出4)了，我的设想是onfocus先于radio的checked，因此第⼀次点击(focus)上海时触发函数使⽤⼴州的value，函数执⾏后上海再被选中(checked)，第⼆次点击上海执⾏函数时就使⽤上⼀次的value。描述可能不是很清晰，⼤神们试着输⼊1.3然后选择上海，出来的结果是6.5(错误)，再选择上海才是9.5(正确)。基于这个案例希望⼤神解释下onfocus在这⾥的运作原理，能说下onclick和onfocus的区别更佳，现⾏致谢！
运费计算器
body {
background: #6ccac9;
margin: 0;
}
label,
input {
padding: 0;
margin: 0;
}
.wrap {
width: 25%;
margin: 5% auto;
background: #fff;
-
webkit-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px; padding: 10px 20px;
}
.region-wrap {
margin: 10px auto;
border: 1px solid #ddd;
}
table {
border-spacing: 5px;
}
td {
padding: 5px 7px;
margin: 0;
}
label:hover,
input[name="region"]:hover, td:hover {
cursor: pointer; background: #ddd;
}
.region-table {
margin: auto;
}
.
weight-wrap {
margin: 10px 0;
}
.weight {
width: 76%;
height: 25px;
-webkit-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ddd;
display: inline-block;
font-size: 14px;
padding: 0 5px;
box-sizing: border-box;
}
.result-wrap {
margin: 15px 0;
}
.result-wrap span {
font-size: 20px;
color: #9e1616;
vertical-align: middle;
}
@media screen and (max-width:798px) {
.wrap {
width: 90%;
overflow: hidden;
}
}
⼴州⼴东上海江苏浙江安徽江西福建⼴西湖南湖北海南北京天津重庆云南贵州四川河南河北⼭东⼭西陕西辽宁吉林⿊龙江⽢肃内蒙古宁夏青海新疆西藏重量/kg：
运费/元：
var regions = ElementsByName("region");
var totalFee = ElementById("result"); var type = /^\d+(\.\d+)?$/;
var re = new RegExp(type);
var exFee = "";
var weight = "";
var isNum;
var region;
Math.formatFloat = function(f, digit) {
var m = Math.pow(10, digit);
return parseInt(f * m, 10) / m;
}
function getExFee() {
weight = ElementById("weight").value; isNum = re.test(weight);
if (!isNum) {
totalFee.innerHTML = "";
return false;
}
for (var i = 0; i < regions.length; i++) {
if (regions[i].checked == true) {
region = regions[i].value;
}
}
console.log(region);
switch (region) {
case "1":
exFee = 1;
break;
case "4":
exFee = 4;
break;
case "5":
exFee = 5;
break;
case "7":
exFee = 7;
break;
case "10":
exFee = 10;
break;
case "15":
exFee = 15;
break;
}
if (weight <= 0 || weight == "") {
totalFee.innerHTML = "";
return false;
} else if (weight > 0 && weight <= 1.2) {
totalFee.innerHTML = 5.5;
} else {
totalFee.innerHTML = 5.5 + il(Math.formatFloat(weight - 1.2,2)) * exFee; // totalFee.innerHTML = 5.5 + il(weight - 1.2) * exFee;
}
}htmlradio设置默认的按钮