时间戳

首页 > 解决方案 > 选中复选框后显示消息 - HTML 联系表

html - 选中复选框后显示消息 - HTML 联系表

问题描述

我尝试按照此链接的步骤操作，但无法使其正常工作。

我正在尝试使其在通过 HTML 在 WordPress 中制作的联系表单中，如果用户选中一个框，则会显示其他内容。我实现了出现在我网页链接中的代码，并将 CSS（不是 SCSS）添加到 Wordpress 允许您执行的自定义 CSS 页面详细信息中。但即使我认为我遵循了所有正确的步骤，只有在选中该框时才会显示的消息始终显示。

给出的示例我将其缩短为

<form name="Inscripción" method="POST" onsubmit="return" form_validation()="" action="../customer-details.php">. 
<input type="radio" name="choice-animals" id="choice-animals-dogs"><br>
<label for="choice-animals-dogs">I like dogs more</label><p></p>. 
<div class="reveal-if-active"> Anything you want in here. </div>
</form>

添加的 CSS 是

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px; /* little bit of a magic number :( */
  overflow: visible;
}

感谢您提供的任何帮助！

标签： htmlcsswordpress

解决方案

我已经检查了您的代码，它似乎对我有用。如果 CSS 代码不适合你。您可以使用下面的 jquery 代码在选中的收音机上显示消息。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
    jQuery(document).ready(function(){
        jQuery('.reveal-if-active').hide();
        jQuery('input[type="radio"]').change(function() {
            if (jQuery(this).is(':checked')) {
                jQuery('.reveal-if-active').show();
            }
        });

    });
</script>
</head>

<form name="Inscripción" method="POST" onsubmit="return" form_validation="" action="../customer-details.php">. 
<input type="radio" name="choice-animals" id="choice-animals-dogs"><br>
<label for="choice-animals-dogs">I like dogs more</label><p></p>. 
<div class="reveal-if-active"> Anything you want in here. </div>
</form>

推荐阅读