Question

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

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

给出的示例我将其简化为

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .myclass{
        display:flex;
        align-items:center;
        background-color:grey;
        color:#fff;
        height:50px;
      }
    </style>
  </head>
  <body>
    <div class="myclass">
      <input type="checkbox">
      <label>do you love Ananas?
      </label>
    </div>
  </body>
</html>

添加的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>

感谢您提供的任何帮助！

Answer 1

我检查了您的代码，它似乎对我有用。如果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>

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

1 个答案: