[英]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.