[英]How to make sure a radio button has been selected
I am creating a conversion table that requires a user to input two numbers for example 5
and 9
and this will then produce a table from numbers 5 to 9 converting that from either miles to kilometres, or kilometres to miles. 我正在创建一个转换表,要求用户输入两个数字,例如
5
和9
,然后将生成一个从5到9的表,将其从英里转换为公里,或者将公里转换为英里。 I have created two radio buttons one for miles to kilometres and another for kilometres to metres however when I type two numbers for example 2
and 5
and click convert it still shows the result, however I want it so that nothing happens until one of the radio button has been clicked. 我创建了两个单选按钮,一个用于英里至公里,另一个用于公里至米,但是当我键入两个数字(例如
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>
Your original code was pretty close, there's just two things to look into. 您的原始代码非常接近,只有两件事需要研究。
First, you'll want to change $('input[type=radio]:checked').size()
to $('input[type=radio]:checked').length
. 首先,您需要将
$('input[type=radio]:checked').size()
更改$('input[type=radio]:checked').length
。 Then add an if statement inside conversionTable()
to make sure that a radio is checked. 然后在
conversionTable()
内添加一个if语句,以确保选中了单选。
Second, the text input values being passed to conversionTable()
are being passed as strings , not integers . 其次,传递给
conversionTable()
的文本输入值将作为字符串而不是整数传递。 You can use parseInt()
to convert them to integer values. 您可以使用
parseInt()
将它们转换为整数值。
Something like this should work: 这样的事情应该起作用:
One small change to add parseInt()
. 添加
parseInt()
一个小小的更改。 You could consider removing the function parameters and instead getting the form values inside the function. 您可以考虑删除函数参数,而是在函数内部获取表单值。 It might clean up the code a little bit.
可能会清理一些代码。
<button onClick="conversionTable(getnputValue(),parseInt(document.getElementById('rangeTxt2').value))">Convert</button>
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);
}
You can see it working here: https://jsfiddle.net/oknh926a/ 您可以在这里看到它的工作: https : //jsfiddle.net/oknh926a/
Hope that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.