Question

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

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>

我在做什么错了？

Answer 1

你很近。只需添加一张针对美国的支票，它就会起作用。

此代码的作用是，如果选中“加拿大”单选按钮，则邮政输入的显示为阻止（可见），而zip输入的显示为无（隐藏）。相同，但如果选中“美国”单选按钮，则相反。

我使用display而不是visibility的原因是，如果使用visibility，则该元素仍然存在，只是被隐藏了。那意味着元素曾经有一个奇怪的空白。但是，display做同样的事情，除了它通过移除<input>并读取它（而不是消失并重新出现）来摆脱那个奇怪的空间。

function yesnoCheck() {
  if (document.getElementById('Canada').checked) {
    document.getElementById('Postal').style.display = 'block';
    document.getElementById('ZIP').style.display = 'none';
  }
  if (document.getElementById('USA').checked) {
    document.getElementById('ZIP').style.display = 'block';
    document.getElementById('Postal').style.display = 'none';
  }
}

yesnoCheck();

<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="PostalInput" name="Postal" placeholder="Your Postal Code">
    <br>
  </div>

  <div id="ZIP">
    <label for="PostalUSA">ZIP Code</label>
    <input type="number" id="ZIPInput" name="ZIP" placeholder="Your ZIP code">
    <br>
  </div>

</body>

Answer 2

不需要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>

Answer 3

标签显示javascript和html，因此我建议您使用以下简单代码段：

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    }
    else document.getElementById('ifYes').style.display = 'none';

}
</script>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
   This box is Magic, it will show and hide when clicking on radio button!
</div>

Answer 4

问题在于，您必须先隐藏邮政编码，因为您要先选中加拿大，然后还要两个ID（称为ZIP）。当用户也选择USA时，您可能想处理onclick事件。我有一个jsfiddle供您签出，但它在jQuery中。单选按钮可能有点挑剔。

jQuery解决方案： HTML

var request = require('request');

var options = {
  uri: 'My_API_URL',
  method: 'POST',
  json: {
    "text":"this is my text"
  }
};

request(options, function (error, response, body) {
  if (!error && response.statusCode == 200) {
    console.log(body);
  }
});

CSS

  Country
  <br> Canada <input type="radio"   name="country" id="Canada" checked="checked"> USA <input type="radio" o  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="Postal" name="Postal" placeholder="Your Postal Code">
    </div>
      <div id="ZIPCODE">
    <label for="PostalUSA">ZIP Code</label>
    <input type="number" id="ZIP" name="ZIP" placeholder="Your ZIP code">
  </div>

jQuery onReady

#ZIPCODE{display:none;}

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

4 个答案: