javascript - 如何使单选按钮显示/隐藏输入表单

Question

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

我使用的网站只允许我编辑 css 和 javascript，所以我不能更改 html，但单选按钮和输入字段上有 ID。

基本上，我正在处理产品页面，并且只想在有人只选择购买一种产品而隐藏其他产品时显示一个下拉菜单。然后，如果他们选择购买两个单选按钮，则显示第二个……等等

[ https://codepen.io/adrian-england/pen/bmKPxO][1]

HTML

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="three">

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

CSS

.visible { display: block; }
.hidden { display: none;}

JS

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

    seltwo.addClass("hidden");
};

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

Answer 1

如果您使用的是纯 JavaScript 而不是 jQuery，您希望将其添加到 classList:

function hideSelector (){
    var seltwo = document.getElementById("second");
    seltwo.classList.add("hidden");
};

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

如果你想使用 jQuery，那么你可以使用它来选择元素:

function hideSelector (){
    var seltwo = $("#second");
    seltwo.addClass("hidden");

    // Additionally you could one line this $('#second').addClass('hidden');
};

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