输入 type="radio" 的激活按钮

Posted 2023-03-27

【中文标题】输入 type="radio" 的激活按钮

【英文标题】：Activating button with input type="radio"

【发布时间】：2021-10-10 01:39:34

【问题描述】：

我有一个包含 5 个问题的表单，每次向用户显示一个问题，就像测验一样。问题 1 使用输入 type="radio"。我想知道是否有办法不必为每个输入调用函数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>

【问题讨论】：

您可以给所有收音机一个类，只需在类中添加一个eventListener，以避免在每个收音机上都使用oninput="checkObjective()"

只删除你不想调用的 oninput 吗？

这可能会有所帮助：***.com/questions/8922002/…

【参考方案1】：

如果我正确理解了您的问题，您不想在每个单选按钮上重复添加oninput="checkObjective()"。

在这种情况下，您可以简单地给它们一个通用类，然后给它们附加一个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();
  );
);

【讨论】：

把东西放在""之间。喜欢：value="3".

【参考方案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>