使用单选按钮隐藏组件答案

【问题标题】：Hiding components using a radio button使用单选按钮隐藏组件
【发布时间】：2019-11-02 20:40:36
【问题描述】：

在我的网站中，我使用 php 来处理联系/订阅。表单很简单，有两个单选按钮可以控制用户是想“订阅”还是“联系”我。在后一种情况下，我希望出现另一个“消息”框。这是我目前所拥有的：

在contact.php:

    <?php include('form_process.php'); ?>

    <html>
    <head>
    ...
    ...

      <div class="blockform">
        <h2> Contact/Subscribe </h2>
        <div class="container" >
          <form id="contact" action="<?= $_SERVER['PHP_SELF']; ?>" method="post">

      <label class="label">    
      <input type="radio" name="gender" 
      <?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
      value="subscribe"> SUBSCRIBE

      <input type="radio" name="gender" style="margin-left:2em"
      <?php if (isset($gender) && $gender=="contact") echo "checked";?>
      value="contact"> CONTACT
      </label>

            <label class="label" for="name">Name: *</label>
            <fieldset>
              <input class="w-input input" placeholder="Your Name" type="text" name="name" value="<?= $name ?>" tabindex="1" required autofocus>
              <span class "error"><?= $name_error ?></span>
            </fieldset>
            <label class="label" for="email">Email address: *</label>
            <fieldset>
              <input class="w-input input" placeholder="Your Email Address" type="Email" name="email" value="<?= $email ?>" tabindex="2" required>
              <span class "error"><?= $email_error ?></span>
            </fieldset>

              <label class="label" for="field" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?>> Message:</label>
            <fieldset>
              <textarea class="w-input input" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?> id="field" placeholder="Enter your message" name="message" value="<?= message ?>" tabindex="3" required></textarea>

              <button class="w-button button-link button-right" name="submit" type="submit" id="contact-submit" data-submit="Please wait...">SUBMIT</button>
            <fieldset> </fieldset>
          </form>
        </div>    
      </div>

在form_process.php 中，我有常用代码来处理单击“提交”按钮时发生的情况。我遇到的问题是，为了使隐藏/显示消息框的代码正常工作，考虑到单选按钮的实际值，需要重新加载页面。但是单击单选按钮不会触发任何事情。我尝试添加一个onclick javascript 函数来重新加载页面，但这没有考虑我按下的单选按钮的实际值。这似乎是一个简单的问题，但我找不到解决方案。

【问题讨论】：

您可以使用 javascript 显示或隐藏表单元素，而无需重新加载页面。如果你有点懒（谁不是），你可以使用 Jquery 的 show 和 hide。
您的意思是获取元素的名称并以编程方式隐藏它们？
是的，使用 onchange 事件，获取单选按钮的状态，并使用它在 Javascript 中显示或隐藏消息框。
这是一个非常相似的问题：stackoverflow.com/questions/9525282/…
更改复选框时，后端没有任何变化。因此，当您重新加载页面时，该复选框被选中的信息应该来自哪里。您可能想提交然后重新加载。

标签： php html radio-button

【解决方案1】：

听从 KIKO Software 的建议，我最终的解决方案是：

在contact.php

  <label class="label">    
  <input type="radio" name="gender" onchange="hideMessage()"
  <?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
  value="subscribe"> SUBSCRIBE

  <input type="radio" name="gender" style="margin-left:2em" onchange="hideMessage()"
  <?php if (isset($gender) && $gender=="contact") echo "checked";?>
  value="contact"> CONTACT
  </label>

contact.php中需要隐藏/显示的元素：

    <label class="label" for="field" id="messageTag" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?>> Message:</label>
        <fieldset>
          <textarea class="w-input input" id="messageID" name="message" placeholder="Enter your message" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?> value="<?= message ?>" tabindex="3"></textarea>
        </fieldset>

在contact.php的末尾

  <script type="text/javascript"> 
    function hideMessage(){

      var radios = document.getElementsByName('gender');
      var contactType;

      for (var i = 0, length = radios.length; i < length; i++)
      {
       if (radios[i].checked)
       {
        // do whatever you want with the checked radio
        contactType = radios[i].value;

        // only one radio can be logically checked, don't check the rest
        break;
       }
      }            
      var x = document.getElementById("messageTag");
      var y = document.getElementById("messageID");
      if (contactType === "subscribe") {
        x.style.display = "none";
        y.style.display = "none";
      } else {
        x.style.display = "block";
        y.style.display = "block";
      }
    }
  </script>

【讨论】：

啊，没有 Jquery。我会更加注意正确命名事物。两个明显的命名错误是：无线电输入被称为gender，但与性别无关。该函数称为hideMessage()，但也可以显示消息。正确命名很重要，对于其他人理解您的代码，对于您自己，如果您多年后阅读自己的代码。
@KIKOSoftware 感谢您的反馈。事实上，我从一个性别示例中复制了单选按钮，并没有立即更改它们，而是在一切解决之后才更改它们。

【解决方案2】：

带有:checked 和~ 选择器的纯css。

类似这样的：

input[type=radio][value="subscribe"]:checked~#subscribe { 
  display: none;
}

input[type=radio][value="contact"]:checked~#subscribe { 
  display: block;
}

重要提示：#subscribe 和 radio input 应该在同一个父级中！

javascript(Jquery) 解决方案：

请参阅下面的示例。

  <div class="blockform">
    <h2> Contact/Subscribe </h2>
    <div class="container" >
      <form id="contact" action="<?= $_SERVER['PHP_SELF']; ?>" method="post">

  <label class="label">    
  <input type="radio" name="gender" 
  <?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
  value="subscribe"> SUBSCRIBE

  <input type="radio" name="gender" style="margin-left:2em"
  <?php if (isset($gender) && $gender=="contact") echo "checked";?>
  value="contact"> CONTACT
  </label>

        <label class="label" for="name">Name: *</label>
        <fieldset>
          <input class="w-input input" placeholder="Your Name" type="text" name="name" value="<?= $name ?>" tabindex="1" required autofocus>
          <span class "error"><?= $name_error ?></span>
        </fieldset>
        <label class="label" for="email">Email address: *</label>
        <fieldset>
          <input class="w-input input" placeholder="Your Email Address" type="Email" name="email" value="<?= $email ?>" tabindex="2" required>
          <span class "error"><?= $email_error ?></span>
        </fieldset id="messagefields">
          <label class="label" for="field"> Message:</label>
          <textarea class="w-input input" id="field" placeholder="Enter your message" name="message" value="<?= message ?>" tabindex="3" required></textarea>
        <fieldset>

          <button class="w-button button-link button-right" name="submit" type="submit" id="contact-submit" data-submit="Please wait...">SUBMIT</button>
        <fieldset> </fieldset>
      </form>
    </div>    
  </div>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script>
    $(document).ready(function () {
        var messagefields = $('#messagefields');
        checkRadioBoxes()

        function checkRadioBoxes() {
            if (this.value === 'subscribe') {
                messagefields.hide();
            }
            else if (this.value === 'contact') {
                messagefields.show();
            }
        }

        $('input[type=radio][name=gender]').change(function() {
            checkRadioBoxes()
        });

    })
   </script>

【讨论】：

这可以在纯 CSS 中使用 :checked 选择器完成。