使单选按钮显示/隐藏输入表单

Question

我正在编写一个网站，我想知道如何让我的单选按钮显示/隐藏输入字段。

我使用的网站只允许我编辑 CSS 和 JavaScript（没有 jQuery），所以我不能更改 HTML，但单选按钮和输入字段上有 ID。

基本上我正在制作一个产品页面，当有人只选择购买一种产品而隐藏其他产品时，我只想显示一个dropdown。如果他们选择隐藏第 3 和第 4 的购买两个单选按钮，则显示两个下拉菜单。如果他们选择隐藏第 4 个的购买三个单选按钮，则显示三个下拉菜单。然后，如果他们选择四个，则全部显示。

Codepen

function hideSelector() {
  var seltwo = document.getElementById("second");

  seltwo.addClass("hidden");
};

document.getElementById("one").addEventListener("click", hideSelector);

.visible {
  display: block;
}

.hidden {
  display: none;
}

Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">

<br>
<select id="first">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="second">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="third">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="fourth">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

Answer 1

在以下演示中： - 每个收音机都监听更改事件 - 将所有表单控件收集到两个 NodeList 中， - 运行一个 for 循环以将 .visible 添加到每个 <select> 直到找到检查的收音机， - 然后它将 .visible 从剩余的 <selects> 中删除

所有<select>s 都被 CSS 隐藏

---

演示

/*
Collect all radios in a NodeList
Collect all selects in a NodeList
*/
var radios = document.querySelectorAll('[type=radio]');
var selects = document.querySelectorAll('select');

/*
On each radio, register it to the change event
When a radio is selected by user and then loses focus,
the callback function buyN() is called
*/
radios.forEach((rad, idx) => {
  rad.addEventListener('change', function(e) {
    buyN(e, radios, selects);
  });
});

/*
Callback function pass Event Object, and 2 NodeLists
The first loop will add .visible to each select.
It is stopped after it finds the checked radio.
The second loop then starts and removes .visible for the
remaining selects.
*/
function buyN(e, radios, selects) {
  var chk;
  for (chk = 0; chk < radios.length; chk++) {
    selects[chk].classList.add('visible');
    if (radios[chk].checked) {
      break;
    }
  }
  var hide = chk + 1;
  for (hide; hide < radios.length; hide++) {
    selects[hide].classList.remove('visible');
  }
}

.visible {
  display: block;
}

select {
  display: none;
}

Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">

<br>
<select id="first">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="second">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="third">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="fourth">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

Answer 2

见下文。可以更改单选按钮，调整选择框的数量。 JS 代码中的文档。

function hideSelector() {
  // Put all radio buttons with the same name in an array
  const radios = [...document.getElementsByName("yesno")];

  // Check which radio button is selected and save the index
  let selectedRadio = 0,
    i = 0;
  for (i = 0; i < radios.length; i++) {
    if (radios[i].checked) selectedRadio = i + 1;
  }

  // Set all select boxes to display: block;
  const selectBoxes = [...document.getElementsByTagName("select")];
  selectBoxes.map( selectBox => selectBox.style.display = "block");
  
  // Hide as many as needed
  const toBeHidden = radios.length - selectedRadio;
  for (i = 0; i < toBeHidden; i++) {
    selectBoxes[i].style.display = "none";
  }
}
// Add an event listener for all radio buttons with the same name
const radios = [...document.getElementsByName("yesno")];
radios.forEach(function(el) {
  el.addEventListener("click", hideSelector);
});

.hidden {
  display: none;
}

select {
  display: block;
  margin-top: 1rem;
}

Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">
<div>
  <select id="first">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <select id="second">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <select id="third">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <select id="fourth">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
</div>

Answer 3

addClass() 是一个 jQuery 方法。

由于您没有使用 jQuery，因此请改用 classList.add()。

function hideSelector() {
  var seltwo = document.getElementById("second");

  seltwo.classList.add("hidden");
};

document.getElementById("one").addEventListener("click", hideSelector);

.visible {
  display: block;
}

.hidden {
  display: none;
}

Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">

<br>
<select id="first">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="second">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="third">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="fourth">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>