如何确保已选择单选按钮
Posted
技术标签:
【中文标题】如何确保已选择单选按钮【英文标题】：How to make sure a radio button has been selected 【发布时间】：2016-05-10 01:15:37 【问题描述】：我正在创建一个转换表，要求用户输入两个数字，例如 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').length吗？
我在网上进行了研究，他们以该功能为例，但是当我仍然按下按钮转换时，它仍然显示表格，我希望它在单击一个单选按钮之前不显示任何内容
【参考方案1】：
您的原始代码非常接近，只需研究两件事。
首先，您需要将$('input[type=radio]:checked').size() 更改为$('input[type=radio]:checked').length。然后在conversionTable() 中添加一个 if 语句以确保选中了一个无线电。
其次，传递给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/
希望有帮助！
【讨论】：
以上是关于如何确保已选择单选按钮的主要内容，如果未能解决你的问题，请参考以下文章