Question

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

目标是无论何时选择一个或多个subscribe，总是显示last name字段。如果未选择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";
      }
    }
  }

Answer 1

尝试（您写了有关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>

Answer 2

我想这就是您要寻找的

document.getElementById("fn").style.visibility = "hidden";
function test() {
var subscr = document.getElementsByClassName("subscribe");
var unsubscr = document.getElementsByClassName("unsubscribe");
var lastName = document.getElementById("2");

for (var i = 0; i < subscr.length; i++) {

if (subscr[i].checked) {
    lastName.style.display = "";
    document.getElementById("fn").style.visibility = "initial";
} 
else {
    lastName.style.display = "none";
}
}
}

<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" id="fn" 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>

Answer 3

在这里，整理一下。注意：id =“ 1”无效，建议进行更改。

const getRadioButtons = () => Array.from(document.querySelectorAll('input[type="radio"]'));
const getName = () => document.querySelector('input[name="first_name"');

document.addEventListener('DOMContentLoaded', () => {
  let radioButtons = getRadioButtons();
  let name = getName();

    radioButtons.forEach(b => {
      b.addEventListener('change', (event) => {

        let show = (radioButtons.some(e => e.checked)) ? "block" : "none";
        name.style.display = show;

      });
    });

});

input[name="first_name"] {
  display: none;
}

<p>The target is that whenever one or more 'subscribe' is selected, the 'first name' field is always shown. When no 'unsubscribe' is selected the 'first name field is hidden. Clicking the various radio should create those results. Thanks in advance.</p>



<form>
  Adhoc <br>
  <input class="subscribe" type="radio" name="news_adhoc" > subscribe <br>
  <input class="unsubscribe" type="radio" name="news_adhoc" > unsubscribe <br>
  <hr> news_newsletter <br>
  <input class="subscribe" type="radio" name="news_newsletter" > subscribe <br>
  <input class="unsubscribe" type="radio" name="news_newsletter" > 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>

使用Java脚本隐藏或显示表单元素，部分工作

3 个答案: