Question

我想验证我的复选框，以确保用户至少检查了一个，但我不断收到此错误：

未捕获的TypeError：无法读取属性＆＃39;已检查＆＃39;未定义的。

以下是HTML的一部分：

<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery@worldbook.com" method="post">
  Name (Required): <input type="text" name="userName" id="userName" required=""><br> E-Mail (Required): <input type="text" name="mail" id="mail" required=""><br> Phone (Required): <input type="text" name="phone" id="phone" required="" onchange="validNumber()"><br>
  <br>
  <p>Please choose your favourite types of books.(check all that apply)</p>
  <input type="checkbox" name="books" value="Science Fiction">Science Fiction
  <input type="checkbox" name="books" value="Travel Guide">Travel Guide
  <input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
  <input type="checkbox" name="books" value="Other">Other <br>
  <textarea></textarea><br>
  <input type="submit" name="submit">
  <input type="reset" name="reset">
</form>

和复选框的部分JavaScript：

function validChoice() 
    {
        var bookChoice = document.userSurvey.books.value;
        var x= "";


        for (i=0;i< 4;i++)
        {
            if (document.userSurvey['bookChoice'+i].checked)
            {
                bookChoice = document.userSurvey['bookChoice'+i].value;
                x = x +"\n"+ bookChoice;        
            }
        }

        if (bookChoice == "")
        {
            window.alert("You must select at least one book category.");
                return false;
            }
        else
        {
            var userName = document.userSurvey.userName.value;
            var eMail = document.userSurvey.email.value;
            var phoneNo = document.userSurvey.phone.value;     
            return true;
    }
}

我目前正在学习JavaScript，因此我更喜欢JavaScript中的帮助。

JSFiddle上的完整代码： https://jsfiddle.net/7qh5segc/

Answer 1

你错过了一些标签名称，并在js函数中错误地使用了它们：

<h1>User Survey</h1>

<h2><strong>User Information</strong></h2>
<p>Please enter your details below</p>
<br>
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery@worldbook.com" method="post">
Name (Required):
<input type="text" name="userName" id="userName" required="">
<br> E-Mail (Required):
<input type="text" name="email" id="email" required="">
<br> Phone (Required):
<input type="text" name="phone" id="phone" required="" onchange="validNumber()">
<br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other
<br>
<textarea></textarea>
<br>
<input type="submit" name="submit">
<input type="reset" name="reset">

</form>

和js代码是这样的：

function validName() {
  var name = document.userSurvey.userName.value;


  if (!/^[a-zA-Z]*$/g.test(name)) {
    alert("Please enter letters a - z only");
    document.userSurvey.userName.focus();
    return false;
  } else {
    return true;
  }


}

function validNumber() {
  var theNumbersOnly = "";
  var theChar = "";
  var theInput = document.userSurvey.phone.value;

  for (i = 0; i < theInput.length; i++) {
    theChar = theInput.substring(i, i + 1);
    if (theChar >= "0" && theChar <= "9") {
      theNumbersOnly = "" + theNumbersOnly + theChar;
    }
  }

  if (theNumbersOnly.length < 10) {
    alert("You must enter 10 numbers.");
    document.userSurvey.phone.focus();
  } else {
    var areacode = theNumbersOnly.substring(0, 3);
    var exchange = theNumbersOnly.substring(3, 6);
    var extension = theNumbersOnly.substring(6, 10);
    var newNumber = "(" + areacode + ") ";
    newNumber += exchange + "-" + extension;

    document.userSurvey.phone.value = newNumber;
    return true;
  }
}



function validEmail() {
  var email = document.userSurvey.email.value;
  var atLoc = email.indexOf("@", 1);
  var dotLoc = email.indexOf(".", atLoc + 2);
  var len = email.length;


  if (atLoc > 0 && dotLoc > 0 && len > dotLoc + 2) {
    return true;
  } else {
    alert("Please enter your e-mail address properly.");
    return false;
  }
}



function validChoice() {
  //var bookChoice = document.userSurvey.books.value;
  var bookChoice;
  var x = "";


  for (var i = 0; i < 4; i++) {
    if (document.userSurvey.books[i].checked) {
    console.log(document.userSurvey);
      bookChoice = document.userSurvey.books[i].value;
      x = x + "\n" + bookChoice;
    }
  }

  if (bookChoice == "") {
    window.alert("You must select at least one book category.");
    return false;
  } else {
    var userName = document.userSurvey.userName.value;
    var eMail = document.userSurvey.email.value;
    var phoneNo = document.userSurvey.phone.value;
    console.log(userName);
    console.log(eMail);
    console.log(phoneNo);
    return true;
  }
}




function validAll() {
  if ((validName() == true) && (validEmail() == true) && (validNumber() == true) && (validChoice() == true)) {
    return true;
  } else {
    return false;
  }
}

您也错过了电子邮件标签名称。问候

Answer 2

您可以使用以下代码修复复选框问题。在这种情况下获取所有复选框的一种明智方法是使用其共享的“name”属性。如果您的结构不同，还有其他方法 - 例如使用CSS类，或向元素添加一些其他自定义属性。

function validChoice() {
  var bookChoices = "";

  var checkboxes = document.getElementsByName("books"); //get all elements named "books" into an array

  for (i = 0; i < checkboxes.length; i++) { //loop the array
    if (checkboxes[i].checked) { //if the array item at this index is checked, then add it to the list
      bookChoices += "\n" + checkboxes[i].value;
    }
  }

  if (bookChoices == "") {
    window.alert("You must select at least one book category.");
    return false;
  } else {
    alert(bookChoices); //just for testing
    return true;
  }
}

使用更改后的validChoice（）函数查看https://jsfiddle.net/7qh5segc/3/的演示。

未捕获的TypeError：无法读取属性＆＃39;已检查＆＃39;未定义的复选框

2 个答案: