我正在创建一个转换表,要求用户输入两个数字,例如 5
和 9
,然后这将生成一个从数字 5 到 9 的转换表从英里到公里,或公里到英里。我创建了两个单选按钮,一个用于英里到公里,另一个用于公里到米,但是当我键入两个数字(例如 2
和 5
并单击转换时,它仍然显示结果,但是我希望它在单击其中一个单选按钮之前不会发生任何事情。
<html>
<head>
<script>
function conversion(n)
{
<!--if(n<=1) return 1;-->
return n/0.62137;
}
function conversionTable(rangeStart, rangeEnd)
{
divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
for(i=rangeStart;i<=rangeEnd;i++)
divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
document.getElementById("divResult").innerHTML=divStr;
}
function getnputValue()
{
return document.getElementById("rangeTxt").value;
}
function check(){
var radios = document.getElementsByName("choice");
for (var i = 0, len = radios.length; i < len; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
</script>
</head>
<body>
<p>
Start : <input type=textbox id=rangeTxt value=""/>
Finish : <input type=textbox id=rangeTxt2 value=""/>
<input type=radio name="convert" id="mtokm" value ="Miles to Kilometre"/> Miles to Kilometre
<input type=radio name="convert" id="kmtom" value ="Kilometre to Miles"/> Kilometre to Miles
<br>
<br>
<button onClick="conversionTable(getnputValue(), document.getElementById('rangeTxt2').value)">Convert</button>
</p>
<div id="divResult">
</div>
</body>
</html>
最佳答案
您的原始代码非常接近,只有两点需要研究。
首先,您需要将 $('input[type=radio]:checked').size()
更改为 $('input[type=radio]:checked ').length
.然后在 conversionTable()
中添加一个 if 语句以确保选中 radio 。
其次,传递给 conversionTable()
的文本输入值作为字符串 传递,而不是整数。您可以使用 parseInt()
将它们转换为整数值。
像这样的东西应该可以工作:
HTML
添加 parseInt()
的一个小改动。您可以考虑删除函数参数,而是在函数内部获取表单值。它可能会稍微清理一下代码。
<button onClick="conversionTable(getnputValue(),parseInt(document.getElementById('rangeTxt2').value))">Convert</button>
JavaScript:
function conversion(n) {
<!--if(n<=1) return 1;-->
return n/0.62137;
}
function conversionTable(rangeStart, rangeEnd) {
if(atLeastOneRadio()) {
divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
for(i=rangeStart;i<=rangeEnd;i++) {
divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
}
document.getElementById("divResult").innerHTML=divStr;
}
}
function getnputValue() {
return parseInt(document.getElementById("rangeTxt").value);
}
function atLeastOneRadio() {
return ($('input[type=radio]:checked').length > 0);
}
你可以看到它在这里工作:https://jsfiddle.net/oknh926a/
希望对您有所帮助!
关于javascript - 如何确保单选按钮已被选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35133045/