使用 JavaScript 检查单选按钮状态答案

【问题标题】：Checking radio-button status with JavaScript使用 JavaScript 检查单选按钮状态
【发布时间】：2020-07-30 10:54:44
【问题描述】：

我为一个活动制作了一个表格。当我单击第一个单选按钮时，然后提交。警告消息会消失，但是，如果我单击第二个单选按钮，则警告不会。我的问题是 some 函数不适合这种情况？我该如何修改它？我们使用some函数是什么情况？谢谢！

const form = document.querySelector('.apply__form');

function createWarning(node) {
  // if there is no warning msg, then create one
  if (!node.querySelectorAll('.warning__style').length) {
    const warning__msg = document.createElement('p');
    warning__msg.innerHTML = 'Please fill in';
    warning__msg.classList.add('warning__style');
    node.appendChild(warning__msg);
  }
}

form.addEventListener('submit', e => {
  e.preventDefault();

  let result = [];

  // Check the required answer for name, phone, email, resource
  const reqAns = document.querySelectorAll('.required .answer');
  const reqAnsArray = [...reqAns];
  reqAnsArray.map(element => {
    if (element.value === "") {
      createWarning(element.parentElement);
    }

    if (element.value && element.parentElement.querySelectorAll('.warning__style').length) {
      element.parentElement.lastChild.classList.add('warning__disappear')
    }
    result.push(element.value)
  })


  // Check the required answer for the type of applying event
  const reqChoice = document.querySelectorAll('.required input[type=radio]');
  const reqChoiceArray = [...reqChoice];
  reqChoiceArray.some(element => {
    if (!element.checked) {
      createWarning(element.parentElement.parentElement);
    }
    if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
      element.parentElement.parentElement.lastChild.classList.add('warning__disappear')
    }
  })

})

body, html {
  box-sizing: border-box;
  font-size: 16px;
}

.wrapper {
  width: 100%;
  background:#f0f0f0;
  padding: 30px 0;
}

.apply__form {
  border-top: 8px solid #f00;
  margin: 0 auto;
  max-width: 645px;
  background: #fff;
  padding: 50px;
}

.form__title {
  font: normal normal bold 1.8rem "Microsoft JhengHei";
}

.event__info {
  margin: 2rem 0;
  font: normal normal normal 0.9rem "Microsoft JhengHei";
}

.event__info .event__place {
  margin-top: 0.5rem;
}

.notice {
  color: #e74149;
  font: normal normal normal 1rem "Microsoft JhengHei";
}

.notice::before {
  content: "*";
  padding-right: 5px;
}

.questions {
  width: 100%;
}

.question {
  font: normal normal normal 1rem "Microsoft JhengHei";
  margin-top: 50px;
}

.question .question__title {
  margin-bottom: 20px;
}

.question .question__title::after {
  content: "*";
  color: #e74149;
  padding-left: 5px;
}

.question:nth-child(4) .type1 {
  margin-bottom: 23px;
}

.question:nth-child(6) .question__title::after {
  content: none;
}

.sub__title{
  margin-bottom: 30px;
}

.question .answer {
  width: 250px;
  padding: 5px;
}

.button__section {
  margin-top: 55px;
  font: normal normal normal 1rem "Microsoft JhengHei";
}

.submit__btn {
  background: #fad312;
  border-radius: 3px;
  outline: none;
  border: none;
  padding: 1rem 2rem;
  margin-bottom: 20px;
  cursor: pointer;
}

.warning {
  font-size: 14px;
}

.copy__right {
  height: 30px;
  background: #000;
  color: #999;
  text-align: center;
  padding: 15px 0;
  line-height: 30px;
  font-family: "Microsoft JhengHei";
}

.warning__style {
  color: #e74149;
  font-size: 14px;
  position: absolute;
}

.warning__disappear {
  display: none;
}

.wrong__format {
  border: 1px solid #f00;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <title>Lazy-Form</title>
</head>

<body>
  <div class="wrapper">
    <form class="apply__form">
      <h1 class="form__title">ABC FORM</h1>
      <div class="event__info">
        <p class="event__time">Event time</p>
        <p class="event__place">Event location</p>
      </div>
      <h3 class="notice">Must</h3>
      <div class="questions">
        <div class="question required">
          <p class="question__title">Nick name</p>
          <input type="text" placeholder="Answer" class="answer">
        </div>
        <div class="question required">
          <p class="question__title">Email</p>
          <input type="email" placeholder="Answer" class="answer">
        </div>
        <div class="question required">
          <p class="question__title">Phone</p>
          <input type="text" placeholder="Answer" class="answer" id="number">
        </div>
        <div class="question required">
          <p class="question__title">type</p>
          <div class="type1 radioType">
            <input type="radio" name="type" id="bed">
            <label for="bed">Bed</label>
          </div>
          <div class="type2 radioType">
            <input type="radio" name="type" id="phone">
            <label for="phone">Phone</label>
          </div>
        </div>
        <div class="question required">
          <p class="question__title">How do you know this?</p>
          <input type="text" placeholder="Answer" class="answer">
        </div>
        <div class="question">
          <p class="question__title">Other</p>
          <input type="text" placeholder="Answer" class="answer">
        </div>
      </div>
      <div class="button__section">
        <input type="submit" class="submit__btn" value="Submit">
      </div>
    </form>
  </div>
  <script src="app.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

我在这里看到了两个潜在的问题。您正在使用 querySelectorAll，它返回一个静态节点列表。但这不应该是这里的问题，只是您需要注意的事情。您以错误的方式使用了某些方法。你需要给它一个检查每个元素并返回真或假的函数。如果任何元素匹配，则 some 方法整体返回 true。所以，它应该看起来更像。（下面的元素不正确，但我希望你明白。）

var response = reqChoiceArray.some(element => {
    if (!element.checked) {
      return false;
    }
    if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
      return true;
    }
  })

if(!!response){
    element.parentElement.parentElement.lastChild.classList.add('warning__disappear');
}else{
    createWarning(element.parentElement.parentElement);
}

【讨论】：

感谢您的反馈。我不明白你为什么说静态 nodeList 是一个潜在的问题。所以，有些方法，我需要发送一个函数。如果整个数据中有“ture”，则结果为真，否则结果为假？
@Oscar 在这种情况下它不是。你只需要小心它。如果您更改节点上的某些内容并使用静态节点列表，则更改不会出现在您的静态节点列表中。如果其中一个元素返回 true，则该方法返回 true。如果全部为假，则返回假。见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…