輸入 type="radio" 的激活按鈕

Question

我有一個包含 5 個問題的表格，其中問題一次向用戶顯示一個，就像測驗一樣。 問題 1 使用 input type="radio" 。 我想知道是否有一種方法不必為每個輸入調用 function checkObjective() ，從而避免重復。

我當前的代碼正在運行，就是這樣：

<form class="questions_box formulario" action="enviar-landing-page-v3.php" method="post">
    <div id="question-1">
        <h3>The question is: ... ?</h3>
        <input type="radio" name="objetivo" id="question-1-answer-a" value="1" required oninput="checkObjective()" /> Answer 1.<br />
        <input type="radio" name="objetivo" id="question-1-answer-b" value="2" oninput="checkObjective()" /> Answer 2.<br />
        <input type="radio" name="objetivo" id="question-1-answer-c" value="3" oninput="checkObjective()" /> Answer 3.<br />

        <div class="text-end mt-3">
            <input type="submit" id="submit1" class="btn btn-primary btn-lg" value="Enviar Resposta" style="display: none;" />
        </div>

        <script type="text/javascript">
            function checkObjective() {
                if (document.getElementsByName("objetivo").value == "") {
                    document.getElementById("submit1").style.display = "none";
                } else {
                    document.getElementById("submit1").style.display = "block";
                }
            }
        </script>
    </div>
</form>

Answer 1

如果我正確理解了您的問題，您不想在每個單選按鈕上重復添加oninput="checkObjective()" 。

在這種情況下，您可以簡單地給他們一個通用的 class 並將一個eventListener附加到他們。

<input type="radio" class="radionButton" name="objetivo" id="question-1-answer-a" value="1" required /> Answer 1.<br />
<input type="radio" class="radionButton" name="objetivo" id="question-1-answer-b" value="2" /> Answer 2.<br />
<input type="radio" class="radionButton" name="objetivo" id="question-1-answer-c" value="3" /> Answer 3.<br />

document.querySelectorAll('.radioButton').forEach(item => {
  item.addEventListener('click', event => {
    checkObjective();
  });
});

Answer 2

 const radios = document.querySelectorAll('div[id^="question"] input[type="radio"]'); for (const radio of radios) { radio.addEventListener('input', checkObjective); } function checkObjective() { const n = Number(this.id.match(/question-(\d+)/)[1]); document.getElementById(`submit${n}`).style.display = 'block'; const next = document.getElementById(`question-${n + 1}`); if (next) { next.style.display = 'block'; } }

 div[id^="question"]:nth-of-type(n+2) { display: none; }

 <div id="question-1"> <h3>The question is:...?</h3> <input type="radio" name="objetivo" id="question-1-answer-a" value=1 required> Answer 1.<br> <input type="radio" name="objetivo" id="question-1-answer-b" value=2> Answer 2.<br> <input type="radio" name="objetivo" id="question-1-answer-c" value=3> Answer 3.<br> <div class="text-end mt-3"> <input type="submit" id="submit1" class="btn btn-primary btn-lg" value="Enviar Resposta" style="display: none;" /> </div> </div> <div id="question-2"> <h3>The question is:...? (2)</h3> <input type="radio" name="objetivo2" id="question-2-answer-a" value=1 required> Answer 1.<br> <input type="radio" name="objetivo2" id="question-2-answer-b" value=2> Answer 2.<br> <input type="radio" name="objetivo2" id="question-2-answer-c" value=3> Answer 3.<br> <div class="text-end mt-3"> <input type="submit" id="submit2" class="btn btn-primary btn-lg" value="Enviar Resposta2" style="display: none;" /> </div> </div>