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

Question

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

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

从本质上讲，我正在开发一个产品页面，并且当有人只选择购买一种产品而隐藏其他产品时，我只想显示一个下拉菜单。然后，如果他们选择"买二"单选按钮，则显示第二个...等

[https://codepen.io/adrian-英格兰/笔/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);