HTML表单，可立即提供反馈

HTML form which gives feedback immediately

本文关键字：表单 HTML      更新时间：2023-09-26

我被要求制作一个网站形式的"工作簿"。在工作簿结束时，用户将被问到一组特定的问题，他/她将回答是/否——这将以单选按钮的形式出现。

示例："你理解第1节了吗？"。。。。。是/否

当用户回答完这些问题后，应该会出现一个灯箱页面，告诉他们回到网站中的特定点。

我环顾四周，找不到任何例子，所以很难解释。有人知道怎么做吗？我感谢任何建议

要检查是否所有问题都得到了回答：

HTML:

<div class="question">
    <input type="radio" name="q1" value="yes" />
    <input type="radio" name="q1" value="no" />
</div>
<div class="question">
    <input type="radio" name="q2" value="yes" />
    <input type="radio" name="q2" value="no" />
</div>
<div class="question">
    <input type="radio" name="q3" value="yes" />
    <input type="radio" name="q3" value="no" />
</div>

jQuery:

$(":radio").change(function() {
    if (!$('.question:not(:has(:radio:checked))').length) {
        alert("all questions are filled in, add code to show colorbox/lightbox/bootstrap modal here")
    }
})

看看这个jsfiddle。我建议使用颜色框来创建覆盖弹出窗口。另一个不错的方法是使用引导模式。

编辑：更新jsfiddle现在使用引导模式！

相关文章：