如何检查是否选择了其中一个单选按钮？

Question

我有 JavaScript 可以很好地检查文本字段和复选框，但是当涉及到单选按钮时，它无法区分是否选择了其中一个选项。

如何正确地做到这一点？

这就是我所拥有的：

 validateBugForm = function()
{
    var name = document.forms["bug_form"]["Name"].value;
    var email = document.forms["bug_form"]["Email"].value;
    var tos = document.forms["bug_form"]["Accept"].checked;
    var project = document.forms["bug_form"]["project"].value;

    if (name == "")
    {
        alert("You must provide your name or nick name!");
        return false;
    }

    if (project == "")
    {
        alert("You must choose a project.");
        return false;
    }

    if (email.indexOf ('@', 0) == -1 || email.indexOf ('.', 0) == -1)
    {
        alert("You must provide your email address!");
        return false;
    }

    if (!tos)
    {
        alert("You must agree to our Terms of Services.");
        return false;
    }
}

在我的表格中，我有：

 <tr>
    <td width="30%">Choose a project in which you encountered a problem.
    <big><font color="red">*</font></big></td></td>
    <td width="10px" class="table_td_space"></td>
    <td width="70%">
        <input type="radio" name="project" value="1" id="1">1<br>
        <input type="radio" name="project" value="2" id="2">2<br>
        <input type="radio" name="project" value="3" id="3">3<br>
        <input type="radio" name="project" value="4" id="4">4<br>
    </td>
</tr>

原文由 HelpNeeder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要遍历所有单选按钮选项以查看是否选择了一个：

 var projectObj = document.form1.project
var len = projectObj.length
var chosen = null;

for (i = 0; i <len; i++) {
    if (projectObj[i].checked) {
       chosen = projectObj[i].value
    }
}

if (chosen == null) {
    alert("No Radio Button Chosen")
}

http://homepage.ntlworld.com/kayseycarvey/jss3p11.html

原文由 msigman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以按输入类型执行 querySelectorAll。这将为您提供一个节点列表。然后您可以将其转换为数组并循环遍历每个输入，并在每个单选按钮上添加一个 eventLister。如果选中一个，则可以显示验证有效，否则调用 showError 函数。但是，单选复选框自然一次只能选中一个，因此您必须在选择任何内容之前从一开始就显示错误，或者您可以在提交时调用另一个函数以停止提交 preventDefault() 如果没有选中单选框。如果您从视图中的数据库中获取这些单选框值，则应检查该元素并适当地替换 JS 选择器。这个例子是静态的 html，但可以很容易地从查询的数据库字段中实现。您也需要采取行动。

 const projectIdsNodeList = document.querySelectorAll("input[type=radio]"); // Get node list
const projectIdsArr = Array.prototype.slice.call(projectIdsNodeList); // convert to array
const projectIdsError = document.getElementById("project-ids-error"); // The static div in the html
const form = document.getElementById("project-form"); // The form
let isValid = false; // true or false

projectIdsArr.forEach((project, index) => {

  project.addEventListener("input", (event) => {

    if(project.checked) {
      projectIdsError.textContent = "Great Job!";
      projectIdsError.className = "valid-custom-styles";
      isValid = true;
    } else {
      isValid = false;
    }

  });


});

form.addEventListener("submit", (event) => {
  if(!isValid) {
    showError();
    alert("you must select a project")
    event.preventDefault();
  }
});

function showError() {
  if(!isValid) {
    projectIdsError.textContent = "Please select a project!";
    projectIdsError.className = "not-valid-custom-styles";
  }
}

 .not-valid-custom-styles {
color: red;
}
.valid-custom-styles {
  color: green;
}

 <form action="" id="project-form">

  <p>Choose a project in which you encountered a problem:</p>

  <input type="radio" name="project_ids" value="Project One" id="1">
  <label>Project One</label><br>
  <input type="radio" name="project_ids" value="Project Two" id="2">
  <label>Project Two</label><br>
  <input type="radio" name="project_ids" value="Project Three" id="3">
  <label>Project Three</label><br>
  <input type="radio" name="project_ids" value="Project Four" id="4">
  <label>Project Four</label>

  <br><br>

  <div id="project-ids-error">Please select a project!</div>

  <br>

  <input type="submit" value="Submit">



</form>

原文由 Elias Glyptis 发布，翻译遵循 CC BY-SA 4.0 许可协议