2013-04-24 5 views
0

У меня есть следующий код, в котором я хочу проверить значения трех групп переключателей, изменить коэффициент и затем произвести некоторые вычисления. Кажется, он не распознает группы для цикла и не говорит, что кнопка не выбрана. Я не тестирую это правильно?JavaScript, тестирование радиокнопки

<!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> 

+0

где переменная «len» исходит из ваших циклов? не должно быть len1 и len2? –

+0

Из того, что я читал на радиокнопках, я подумал, что проверить, проверена ли кнопка, просматривается длина. Len - это всего лишь общая переменная, которая будет использоваться при оценке этого. Учитывая, что у меня было 3 разных группы кнопок, я думал, что мне понадобится 3 переменные .....? – TargetofGravity

+0

Имеет ли значение, что я не использую форму здесь? – TargetofGravity

ответ

0

Измените код следующим образом:

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"); 
} 

http://jsfiddle.net/vMHMR/

Так вы покажете alert только если нет кнопки радио в группе проверяется.

0

Если вы реализуете 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(); 
Смежные вопросы