时间戳

首页 > 解决方案 > 使用 Javascript 隐藏或显示表单元素，部分工作

javascript - 使用 Javascript 隐藏或显示表单元素，部分工作

问题描述

单击时，只有最后一对单选按钮可以显示该last name字段subscribe。

The target is that whenever one or more subscribeis selected, the last namefield is always shown. 选择否时unsubscribe，该last name字段被隐藏。单击各种单选按钮应创建这些结果。提前致谢。

简单的 HTML 表单

<form>
  Adhoc <br>
  <input class="subscribe" type="radio" name="news_adhoc" onClick="test();"> subscribe <br>
  <input class="unsubscribe" type="radio" name="news_adhoc" onClick="test();"> unsubscribe <br>
  <hr> news_newsletter <br>
  <input class="subscribe" type="radio" name="news_newsletter" onClick="test();"> subscribe <br>
  <input class="unsubscribe" type="radio" name="news_newsletter" onClick="test();"> unsubscribe <br>
  <hr>
  <input type="text" name="first_name" placeholder="First Name">
  <input type="text" name="last_name" id="IdLastName" placeholder="Last Name" style="display:none">
  <input type="text" name="email" placeholder="Email">
  <hr>
</form>

脚本并感谢 Randy Casburn 早期的帮助。

<script type = "text/javascript" >
  function test() {
    var subscr = document.getElementsByClassName("subscribe");
    var unsubscr = document.getElementsByClassName("unsubscribe");
    var lastName = document.getElementById("IdLastName");

    for (var i = 0; i < subscr.length; i++) {

      if (subscr[i].checked) {
        lastName.style.display = "";
      } else {
        lastName.style.display = "none";
      }
    }
  }

标签： javascripthtmlforms

解决方案

尝试（你写关于 first_name，但你的代码片段显示/隐藏 last_name - 所以我展示了如何为姓氏做 - 将此更改更改var lastName = document.getElementById("2");为var lastName = document.getElementById("1");（我只编辑 JS 代码 - HTML 未更改）

function test() {
  var subscr = document.getElementsByClassName("subscribe");
  var lastName = document.getElementById("2");
  lastName.style.display = "none";
  
  let show=false;
  
  for (var i = 0; i < subscr.length; i++) {
    if(subscr[i].checked) show=true;
  }
  
  if(show) lastName.style.display = "";
}
<form>
  Adhoc <br>
  <input class="subscribe" type="radio" name="news_adhoc" onClick="test();"> subscribe <br>
  <input class="unsubscribe" type="radio" name="news_adhoc" onClick="test();"> unsubscribe <br>
  <hr> news_newsletter <br>
  <input class="subscribe" type="radio" name="news_newsletter" onClick="test();"> subscribe <br>
  <input class="unsubscribe" type="radio" name="news_newsletter" onClick="test();"> unsubscribe <br>
  <hr>
  <input type="text" name="first_name" id="1" placeholder="First Name">
  <input type="text" name="last_name" id="2" placeholder="Last Name" style="display:none">
  <input type="text" name="email" id="3" placeholder="Email">
  <hr>
</form>

推荐阅读