單擊單選按鈕時如何在第二列中顯示圖像？
[英]How to get an image displayed in second column when clicking a radio button?
問題描述
<html>
<head>
<title>Project 1.6</title>
<body>
<table>
<tr>
<td>
<form>
<input type= "radio" value = "Argentina" name = "places">Argentina<br>
<input type= "radio" value = "Australia" name = "places">Australia<br>
<input type= "radio" value = "Bolivia" name = "places">Bolivia<br>
<input type= "radio" value = "Cuba" name = "places">Cuba<br>
<input type= "radio" value = "Findland" name = "places">Findland<br>
<input type= "radio" value = "France" name = "places">France<br>
<input type= "radio" value = "Italy" name = "places">Italy<br>
<input type= "radio" value = "Peru" name = "places">Peru<br>
<input type= "radio" value = "Syria" name = "places">Syria<br>
<input type= "radio" value = "Tunisia" name = "places">Tunisia<br>
</form>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
所以，基本上我希望每當我點擊第一列中的單選按鈕時，我都會在第二列中獲得該位置標志的圖像？ 請在 HTML 中。
2 個解決方案
解決方案1
0 2014-09-29 23:19:41
為此，您必須使用 JavaScript。 為第二列中的每個選項制作一個隱藏的 div，並在選項選擇時使用 JavaScript 使特定的選項可見。
解決方案2
0 2014-09-30 00:40:43
一些丑陋的CSS解決方案，正如我在上面的評論中提到的，這不能在純 HTML 中完成，這與您將得到的一樣接近。
.flag { position:absolute; top:0; left: 150px; display:none; } input[type="radio"]:checked + .flag {display: inline-block;}
<input type= "radio" value = "Argentina" name = "places">Argentina <img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/ar-lgflag.gif" class="flag"><br> <input type= "radio" value = "Australia" name = "places">Australia<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/as-lgflag.gif" class="flag"><br> <input type= "radio" value = "Bolivia" name = "places">Bolivia<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/bl-lgflag.gif" class="flag"><br> <input type= "radio" value = "Cuba" name = "places">Cuba<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/cu-lgflag.gif" class="flag"><br> <input type= "radio" value = "Findland" name = "places">Findland<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/fi-lgflag.gif" class="flag"><br>
這取決於相鄰兄弟選擇器，因此您不能將圖像移動到單獨的表格單元格。
或者，如果您更喜歡更簡潔的 HTML 和稍微復雜的 CSS：
.flag { position:absolute; top:0; left: 150px; display:none; width: 500px; height: 500px; background-repeat: no-repeat; } input[type="radio"]:checked ~ .flag {display: inline-block;} input[value="Argentina"]:checked ~ .flag{ background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/ar-lgflag.gif"); } input[value="Australia"]:checked ~ .flag{ background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/as-lgflag.gif"); } input[value="Bolivia"]:checked ~ .flag{ background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/bl-lgflag.gif"); } input[value="Cuba"]:checked ~ .flag { background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/cu-lgflag.gif"); } input[value="Findland"]:checked ~ .flag { background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/fi-lgflag.gif"); }
<input type= "radio" value = "Argentina" name = "places">Argentina<br> <input type= "radio" value = "Australia" name = "places">Australia<br> <input type= "radio" value = "Bolivia" name = "places">Bolivia<br> <input type= "radio" value = "Cuba" name = "places">Cuba<br> <input type= "radio" value = "Findland" name = "places">Findland<br><div class="flag"></div>
如何在使用 JavaScript 單擊單選按鈕時顯示不同的圖像？
[英]How to get different images to display when clicking on a radio button using JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.