时间戳

首页 > 解决方案 > 如何根据单选按钮选择显示和隐藏输入

javascript - 如何根据单选按钮选择显示和隐藏输入

问题描述

我希望在选择国家“加拿大”时显示“邮政编码”框，并在选择国家“美国”时显示“邮政编码”框，但是我似乎无法让一个框消失另一个出现。

function yesnoCheck() {
  if (document.getElementById('Canada').checked) {
    document.getElementById('ZIP').style.visibility = 'hidden';
  }
<body>

  Country
  <br> Canada <input type="radio" onclick="javascript:yesnoCheck();" name="country" id="Canada" checked> USA <input type="radio" onclick="javascript:yesnoCheck();" name="country" id="USA"> Other <input type="radio" onclick="javascript:yesnoCheck();" name="country"
    id="Other">
  <br>

  <br>
  <div id="Postal">
    <label for="PostalCA">Postal Code</label>
    <input type="text" id="Postal" name="Postal" placeholder="Your Postal Code">
    <br>
  </div>

  <div id="ZIP">
    <label for="PostalUSA">ZIP Code</label>
    <input type="number" id="ZIP" name="ZIP" placeholder="Your ZIP code">
    <br>
  </div>

</body>

我究竟做错了什么？

标签： javascripthtml

解决方案

这不需要 JS。这在 CSS 中非常简单：

#Postal,
#ZIP {
  display: none;
}

#Canada:checked~#Postal {
  display: block;
}

#USA:checked~#ZIP {
  display: block;
}
<body>

  Country
  <br> Canada <input type="radio" name="country" id="Canada" checked> USA <input type="radio" name="country" id="USA"> Other <input type="radio" name="country" id="Other">
  <br>

  <br>
  <div id="Postal">
    <label for="PostalCA">Postal Code</label>
    <input type="text" id="PostalCA" name="Postal" placeholder="Your Postal Code">
    <br>
  </div>

  <div id="ZIP">
    <label for="PostalUSA">ZIP Code</label>
    <input type="number" id="PostalUSA" name="ZIP" placeholder="Your ZIP code">
    <br>
  </div>

</body>

推荐阅读