时间戳

首页 > 解决方案 > 如何使单选按钮显示/隐藏输入表单

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

问题描述

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

我使用的站点只允许我编辑 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);

标签： javascripthtmlcss

解决方案

如果你使用纯 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);

推荐阅读