Скрыть или показать элементы формы с Javascript, частично работает

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>

Скрипт и спасибо Рэнди Кэсберну за более раннюю помощь.

<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

Вот, немного прибрался.ПРИМЕЧАНИЕ: идентификатор = "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>

Answer 3

Я думаю, это то, что вы ищете

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>