[英]How to show and hide inputs based upon radio button selection
我想在选择“加拿大”国家时显示一个“邮政编码”框，在选择“美国”国家时显示一个“邮政编码”框，但是我似乎无法消失一个框另一个出现。
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>
我究竟做错了什么？
你近了 只需添加一张美国支票，它就会起作用。
该代码的作用是，如果选中了Canada单选按钮，则邮政输入的显示为阻止（可见），而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>
不需要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>
标签说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>
问题在于，您必须先隐藏Zip，因为您要先选中加拿大，然后还要有两个名为ZIP的ID 。 当用户也选择USA时，您可能想处理onclick事件。 我有一个jsfiddle可供您签出，但它在jQuery中。 单选按钮可能有点挑剔。
jQuery解决方案： HTML
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>
的CSS
#ZIPCODE{display:none;}
jQuery onReady
$("input[type='radio']").on("click",function(){
if ($('#Canada').is(":checked"))
$('#ZIPCODE').css("display","none");
else
$('#ZIPCODE').css("display","inline");
});
如何在django admin中选择单选按钮时隐藏/显示字段？
[英]How hide/show a field upon selection of a radio button in django admin?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.