我有以下代码，我想检查3组单选按钮的值，改变系数，然后进行一些计算。它似乎没有识别出循环的组，并告诉我按钮没有被选中。我测试的不对吗?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML meta http-equiv="content-type" content="text/html; charset=UTF-8">
<HEAD>
<TITLE>Couch Shifts</TITLE>
<script type="text/javascript">
function tableShifts()
{
var curVert = Number(document.getElementById("curVert").value);
var curLat = Number(document.getElementById("curLat").value);
var curLong = Number(document.getElementById("curLong").value);
var pinVert = Number(document.getElementById("pinVert").value);
var pinLat = Number(document.getElementById("pinLat").value);
var pinLong = Number(document.getElementById("pinLong").value);
var coVert = 1;
var coLat = 1;
var coLong = 1;
var group1Array = document.getElementsByName("group1");
for (i=0; i<group1Array.length; i++)
{
if (group1Array[i].checked)
{
group1Array = group1Array[i].Value;
break;
}
else
{
alert("Button Not Selected")
}
}
var group2Array = document.getElementsByName("group2");
for (i=0; i<group2Array.length; i++)
{
if (group2Array[i].checked)
{
group2Array = group2Array[i].Value;
break;
alert(group2Array[i].Value);
}
else
{
alert("Button Not Selected")
}
}
var group3Array = document.getElementsByName("group3");
for (i=0; i<group3Array.length; i++)
{
if (group3Array[i].checked)
{
group3Array = group3Array[i].Value;
break;
}
else
{
alert("Button Not Selected")
}
}
switch(group1Array)
{
case "Up":
coVert = 1;
break;
case "Down":
coVert = -1;
break;
}
switch(group2Array)
{
case "Lt":
coLat = 1;
break;
case "Rt":
coLat = -1;
break;
}
switch(group3Array)
{
case "In":
coLong = 1;
break;
case "Out":
coLong = -1;
break;
}
document.getElementById("gotoVert").value = curVert + pinVert*coVert;
document.getElementById("gotoLat").value = curLat + pinLat*coLat;
document.getElementById("gotoLong").value = curLong + pinLong*coLong;
}
</script>
</HEAD>
<BODY>
<div id = "Calcs" style="margin-bottom: 160px;">
<style>
label { float: left; width: 35px; font-size:17px; color:#0000FF}
#column1{ float: left; position: relative; z-index: 0; width: 150px; font-size:20px;}
#column2{ float: left; position: relative; z-index: 1; width: 160px; font-size:20px;}
#column3{ float: left; position: relative; z-index: 2; width: 160px; font-size:20px;}
#button { position: absolute; }
#input.radio{ margin-left: 1px; }
</style>
<div id="column1">Current Position</br></br>
<label for="Vert">Vert</label></br>
<input type="text", id="curVert" size="10" value="" /></br>
<label for="Lat">Lat</label></br>
<input type="text" size="10", id="curLat" value="" /></br>
<label for="Long">Long</label></br>
<input type="text" size="10", id="curLong" value="" /></br>
</div>
<div id="column2">Pinnacle Shifts<br><br>
<label for="Vert">Vert</label>
<input type="radio" name="group1" value="Up"/><font size="2">Up</font>
<input type="radio" name="group1" value="Down"/><font size="2">Down</font>
<input type="text", id="pinVert" size="10" value="" /></br>
<label for="Lat">Lat</label>
<input type="radio" name="group2" value="Lt"/><font size="2">Lt</font>
<input type="radio" name="group2" value="Rt"/><font size="2">Rt</font>
<input type="text", id="pinLat" size="10" value="" /></br>
<label for="Long">Long</label>
<input type="radio" name="group3" value="In"/><font size="2">In</font>
<input type="radio" name="group3" value="Out"/><font size="2">Out</font>
<input type="text", id="pinLong" size="10" value="" />
</div>
<div id="column3">Calculated Shifts</br></br>
<label for="Vert">Vert</label></br>
<input type="text", id="gotoVert" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/></br>
<label for="Lat">Lat</label></br>
<input type="text", id="gotoLat" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/></br>
<label for="Long">Long</label></br>
<input type="text", id="gotoLong" size="10" value="" readonly="readonly" style="background-color:#D8D8D8 ;"/>
</div><br />
</div>
<div id="button">
<input type = "button" style="margin-top: 10px;" value="Calculate Shifts" onclick="tableShifts();" />
<input type = "button" style="margin-top: 10px;" value="Reset" onclick="clear();" />
</div>
修改代码:
var group1Array = document.getElementsByName("group1");
var gr1 = 0;
for (i = 0; i < group1Array.length; i++) {
if (group1Array[i].checked) {
group1Array = group1Array[i].value;
break;
}
else gr1++;
}
if (gr1 == group1Array.length) {
alert("Button Not Selected");
}
所以只有当no单选按钮在组中被选中时才显示alert
如果你实现JQuery (javascript库)，你可以很容易地检查被选中的单选按钮。
if( $("#someRadioButton").is(":checked") )
{
// doSomething
}
或者，你可以…
// Get the ID of the radio button checked
var id = $("input[@name=radioGroup]:checked").attr('id');
// Get the value of the radio button checked
var value = $("input[@name=radioGroup]:checked").val();