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

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

1 个答案: