如何修正我的Javascript的复选框问题/答案与反馈？

Question

我需要帮助弄清楚如何使每个复选框返回一个不同的模式。我想，如果我可以给两个模特儿看，我可以再加一个，但它不起作用。我希望它能为所选择的每一个答案分别提供反馈。例如，如果选择答案A，那么我想要Modal1作为反馈。同样的B，但模式2。选择C已经是正确的。

<form id="submit1">

    <div id="question1" class="p-body flex-col-left" style="justify-content: flex-start;">
        <label>
            <input type="checkbox" name="input" value="wrongA" class="question1" data-seen=1>
            <span class="lineup">A. Emily should cross through the incorrect information and write in
                the correct information.</span>
        </label>
        <br>
        <label>
            <input type="checkbox" name="input" value="wrongB" class="question1" data-seen=2>
            <span class="lineup">B. Emily does not need to do anything until it is time for her to renew
                her license.</span>
        </label>
        <br>
        <label>
            <input type="checkbox" name="input" value="right" class="question1" data-seen=0>
            <span class="lineup">C. Emily needs to fill out the appropriate paperwork and submit it to
                the TDLR. </span>
        </label>
        <br>

        <br>

    </div>
    <div class="flex-center">
        <button type="submit" id="answer" class="modal-button modal-a">Submit</button>
    </div>
</form>
<script>

    document.getElementById("answer").onclick = validate;

    function validate() {
        var checkboxes = document.getElementsByName("input");
        var checkboxChecked = [];

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked && (checkboxes[i].value === "right")) {
                checkboxChecked.push(checkboxes[i]);
            }
        }

        for (var i = 1; i < checkboxes.length; i++) {
            if (checkboxes[i].checked && (checkboxes[i].value === "wrongA")) {
                checkboxWrongA.push(checkboxes[i]);
            }
        }
        for (var i = 2; i < checkboxes.length; i++) {
            if (checkboxes[i].checked && (checkboxes[i].value === "wrongB")) {
                checkboxWrongB.push(checkboxes[i]);
            }
        }

        if (checkboxChecked.length === 1) {
            const modal1 = document.querySelector('#modal1');
            modal1.style.display = 'block'
            window.nextBtn.style.display = "block";
            window.dropdown.style.display = "block";
            window.breadcrumb.style.display = "block";

        } 
        
        if (checkboxWrongA.length === 1) {
            const modal2 = document.querySelector('#modal2');
            modal2.style.display = 'block'
        }

     if (checkboxWrongB.length === 1) {
            const modal3 = document.querySelector('#modal3');
            modal3.style.display = 'block'
        }
    }

</script>

Answer 1

因为您提到您的用户只应该选择1个选项，那么设置一个radio按钮就可以了。然后，我们需要评估您的JS与单选按钮的工作。

首先，确保每个收音机都具有相同的name属性值。这使我们能够使用name从检查的输入中获取值。允许value表示所选选项。您可以在这里使用right或wrongA，但这并不能说明选择了哪个选项，只是它是正确的。

<input type="radio" name="answer" value="A">
<input type="radio" name="answer" value="B">
<input type="radio" name="answer" value="C">

现在，在JavaScript方面，我们可以使事情变得更简单。由于您使用的是<form>元素，我建议您侦听表单上的submit事件，以了解何时单击验证按钮。

每当您在submit中有一个带有<button type="submit">的<form>并单击该按钮时，就会发生一个<button type="submit">事件。默认情况下，页面将重新加载。我们需要通过防止表单的默认行为来阻止这种情况的发生。(见event.preventDefault())。

我们可以使用FormData对象从表单中提取数据。这个对象为我们做了很多工作，例如，找出哪些输入已经被检查过。对于该对象，我们可以通过使用输入的name来请求输入的值。在本例中，我使用了名称：'answer'。

因为我们现在使用无线电输入，因此值只能是A、B或C。根据答案，寻找合适的模态并显示它。

const form = document.querySelector('#question-form');

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

  const formData = new FormData(form);
  const answer = formData.get('answer');
  
  if (answer === 'A') {
    const modal = document.querySelector('#modal1');
    modal.classList.add('show');
  } else if (answer === 'B') {
    const modal = document.querySelector('#modal2');
    modal.classList.add('show');
  } else if (answer === 'C') {
    const modal = document.querySelector('#modal3');
    modal.classList.add('show');
  }
});

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: pink;
  padding: 50px 100px;
}

.modal.show {
  display: block;
}

<form id="question-form">
  <div>
    <label>
      <input type="radio" name="answer" value="A" class="question1" data-seen=1>
      <span class="lineup">A. Emily should cross through the incorrect information and write in the correct information.</span>
    </label>
  </div>
  
  <div>
    <label>
      <input type="radio" name="answer" value="B" class="question1" data-seen=2>
      <span class="lineup">B. Emily does not need to do anything until it is time for her to renew her license.</span>
    </label>
  </div>
  
  <div>
    <label>
      <input type="radio" name="answer" value="C" class="question1" data-seen=0>
      <span class="lineup">C. Emily needs to fill out the appropriate paperwork and submit it to the TDLR.</span>
    </label>
  </div>
  
  <button type="submit" class="modal-button modal-a">Submit</button>
</form>

<div id="modal1" class="modal">
  Modal 1
</div>

<div id="modal2" class="modal">
  Modal 2
</div>

<div id="modal3" class="modal">
  Modal 3
</div>

​

Answer 2

在本例中，复选框被单选按钮替换，因为似乎只有一个正确的答案(多个模式很傻)。模型是元素。另外，“应答”按钮会触发一个注册到<form>的“提交”事件。事件处理程序check(e)旨在利用事件委托的控制。此外，HTMLFormElement和HTMLFormControlsCollection接口用于引用<form>及其表单控件(<form>中的所有<input> )。

详细信息在示例中有注释

​

/**
 * Register the <form> to the "submit" event
 * The event handler check(e) is called when a "submit" event is triggered
 */
document.forms.quiz.onsubmit = check;

/**
 * The event handler passes the Event object by default
 * Prevent the default behavior of <form> during "submit" event
 * Collect all HTMLFormControls into a HTMLCollection
 * If a one form control with [name="chx"] is .checked...
 * ...get the checked radio button's value...
 * ...reference the <dialog> with the class of the same value as the 
 * checked radio button...
 * ...then open that <dialog>
 */
function check(e) {
  e.preventDefault();
  const fc = this.elements;
  if (Array.from(fc.rad).some(c => c.checked)) {
    const answer = fc.rad.value;
    const modal = document.querySelector('.' + answer);
    modal.showModal();
  }
}

/**
 * Collect all .close (buttons) into a NodeList and bind each one to the
 * "click" event.
 * The event handler close(e) is called when the "click" event is triggered.
 */
document.querySelectorAll(".close").forEach(btn => btn.onclick = close);

/**
 * This event handler will close the parent <dialog> of the clicked <button>
 */
function close(e) {
  this.closest('dialog').close();
}

html {
  font: 300 2ch/1.2 'Segoe UI'
}

body {
  min-height: 100vh;
}

body,
form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}

form {
  padding: 10px 30px;
}

fieldset {
  width: min(50vw, 500px);
}

legend {
  font-size: 1.25rem;
}

menu {
  margin: 0 20px 10px 0;
}

.list {
  list-style-type: lower-latin;
  margin: 20px 30px 0 -10px;
}

label {
  display: inline-flex;
  align-items: flex-start;
  transform: translate(12px, -17px);
  line-height: 1;
}

button,
input {
  font: inherit;
  cursor: pointer;
}

.right * {
  float: right;
  margin-bottom: 20px;
}

<form id="quiz">
  <fieldset>
    <legend>Quiz</legend>
    <menu class="list">
      <li><label>
        <input name="rad" type="radio" value="A"> Emily should cross through the incorrect information and write in the correct information.
      </label></li>
      <li><label>
        <input name="rad" type="radio" value="B"> Emily does not need to do anything until it is time for her to renew her license.
      </label></li>
      <li><label>
        <input name="rad" type="radio" value="C"> Emily needs to fill out the appropriate paperwork and submit it to the TDLR.
      </label></li>
    </menu>
    <menu class="right">
      <button>Done</button>
    </menu>
  </fieldset>
</form>

<dialog class="A">
  <fieldset>
    <legend>Message A</legend>
    <p>Quote mode. It's called carpe diem Morty. Look it up. Morty! The principal and I have discussed it, a-a-and we're both insecure enough to agree to a three-way! Haha god-damn! </p>
    <menu class="right">
      <input class="close" type="button" value="OK">
    </menu>
  </fieldset>
</dialog>

<dialog class="B">
  <fieldset>
    <legend>Message B</legend>
    <p>Yo! What up my glip glops! Lookin' good! Are you kidding? I'm hoping I can get to both of them, Rick! I mixed in some praying mantis DNA. You know a praying mantis is the exact opposite of a vole, Morty? They mate once and then bluergh cut each other's
      heads off. </p>
    <menu class="right">
      <input class="close" type="button" value="OK">
    </menu>
  </fieldset>
</dialog>

<dialog class="C">
  <fieldset>
    <legend>Message C</legend>
    <p>Get off the high road Summer. We all got pink eye because you wouldn't stop texting on the toilet. Flip the pickle over. Honey, stop raising your father's colesterol so you can take a hot funeral selfie. God? God's turning people into insect monsters
      Beth. I'm the one beating them to death. Thank me. </p>
    <menu class="right">
      <input class="close" type="button" value="OK">
    </menu>
  </fieldset>
</dialog>

​