Question

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

我正在使用的网站仅允许我编辑CSS和JavaScript（没有jQuery），因此我无法更改HTML，但是单选按钮和输入字段上有ID。

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

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>中，直到找到选中的单选为止， -然后它将从其余<selects>

中删除.visible

所有<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

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>

Answer 3

请参阅下文。可以更改单选按钮，将调整选择框的数量。 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>

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

3 个答案:

演示