JavaScript 单选按钮不起作用,需要帮助

JavaScript Radio Buttons not working and need assistance

function validateStudent() {
  //retrieve Last Name, First Name, Email values
  var lastName = document.getElementById("lastName").value;
  var firstName = document.getElementById("firstName").value;
  var email = document.getElementById("email").value;
  var resident = document.getElementById("resident").value;

  //retrieve index value of Advisor
  advisorIndex = document.getElementById("advisor").selectedIndex;
  //Validate and determine class value
  classChecked = false;
  for (var i = 0; i < document.frmStudent.class.length; i++) {
    if (document.frmStudent.class[i].checked == true) {
      classChecked = true;
      vClass = document.frmStudent.class[i].value;
    }
  }


  //Determine resident status
  if (document.getElementById("resident").checked == true) {
    alert("KY Resident:Yes.")
    resident = "Yes";
  } else {
    alert("KY Resident:No.")
    resident = "No";
  }

  //Validate student data entries
  if (lastName == "") {
    alert("Please enter your last name.");
    document.frmOrder.lastName.select();
    return false;
  } else if (firstName == "") {
    alert("Please enter your first name.");
    document.frmOrder.firstName.select();
    return false;
  } else if (email == "") {
    alert("Please enter a valid email address");
    document.frmOrder.email.select();
    return false;
  } else if (classChecked == false) {

    return false;
  } else if (advisorIndex == -1) {


    return false;
  } else {
    //determine Advisor name based on advisor index value
    vAdvisor = document.frmStudent.advisor.options[advisorIndex].value;
    //Prepare and display student entries
    studentEntries =
      alert(studentEntries);
    return false;
  }
}
fieldset {
  width: 50%;
  margin: 0px 0px 10px 1%;
}

legend {
  padding: 2px;
  text-indent: 5px;
}

p {
  margin-left: 1%;
}

#contactEntry label {
  clear: left;
  display: block;
  float: left;
  width: 30%;
  margin: 7px 5px;
}

#contactEntry input {
  display: block;
  float: left;
  width: 60%;
  margin: 7px 5px;
}

input[type="submit"],
input[type="reset"] {
  display: inline;
  float: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>EKU Student Information</title>
</head>

<body>
  <form name="frmStudent" id="frmStudent" action=" " method="post" onsubmit="return validateStudent();">
    <fieldset id="contactEntry">
      <legend>Contact Information</legend>
      <label for="lastName">Last Name:</label>
      <input type="text" name="lastName" id="lastName" />
      <label for="firstName">First Name:</label>
      <input type="text" name="firstName" id="firstName" />
      <label for="email">E-Mail:</label>
      <input type="text" name="email" id="email" />
    </fieldset>
    <fieldset id="fieldClass">
      <legend>Class Classification</legend>
      <input type="radio" name="class" id="freshman" value="Freshman" checked="checked" /> &nbsp;&nbsp;Freshman
      <br/>
      <input type="radio" name="class" id="sophomore" value="Sophomore" checked="checked" /> &nbsp;&nbsp;Sophomore
      <br/>
      <input type="radio" name="class" id="junior" value="Junior" checked="checked" /> &nbsp;&nbsp;Junior
      <br/>
      <input type="radio" name="class" id="senior" value="Senior" checked="checked" /> &nbsp;&nbsp;Senior
    </fieldset>

    <fieldset id="fieldAdvisor">
      <legend>My Advisor</legend>
      <select size="5" name="advisor" id="advisor">
        <option>Mike Hawksley</option>
        <option value="Chang-Yang Lin">CY Lin</option>
        <option>Steve Loy</option>
        <option>Bob Mahaney</option>
        <option>Ted Randles</option>
      </select>
    </fieldset>
    <p> <input type="checkbox" name="resident" id="resident" />&nbsp;&nbsp;
      <label for="resident">Kentucky Resident</label>
    </p>
    <p><input type="submit" value="Submit" onclick="onsubmit" />&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" value="Reset" /></p>
  </form>
</body>

</html>

我的任务是下面的,我在让代码工作时遇到了问题。非常感谢所有帮助。

  1. 创建一个确认用户的表单验证函数:

    1. 在姓氏、名字和电子邮件中输入值。
    2. 通过 selecting Class 单选按钮之一指定 Class 值。
    3. 从 selection 列表中选择顾问。
  2. 如果任何验证失败,显示带有适当消息的警报。如果未输入其中一个文本输入值,select 相关输入的当前值。

  3. 使用表单提交事件处理程序调用表单验证函数。
  4. 表单验证所有表单输入后,显示警报以汇总用户输入。如果选中肯塔基州居民复选框,则显示消息 "KY Resident: Yes." 如果清除肯塔基州居民复选框,则显示消息 "KY Resident:No."

通过查看您的代码,我发现驻留条件并未关闭。 例如:

    {
        alert("KY Resident:Yes.")
        resident = "Yes";
    }
    else
    {
        alert("KY Resident:No.")
        resident = "No";
    {
change it to 

if (document.getElementById("resident").checked == true)
    {
        alert("KY Resident:Yes.")
        resident = "Yes";
    }
    else
    {
        alert("KY Resident:No.")
        resident = "No";
    }

为了让您的代码循环通过您的表单验证器,我建议将 <p><input type="submit" value="Submit" onclick = "onsubmit"/> 替换为 <p><input type="submit" value="Submit" onclick = "validateStudent"/>

对于数组,您可以在 validateStudent 函数的开头创建它,并在可以推送消息的条件下创建它。

function validateStudent() {
  var output = [];

  // change these kind of if statement
  if (document.getElementById("resident").checked == true) {
    alert("KY Resident:Yes.")
    resident = "Yes";
  }
  // to something like this
  if (document.getElementById("resident").checked == true) {
    output.push("KY Resident:Yes.");
    resident = "Yes";
  }

  // at the end of the function
  alert(output.join('\n'))
}