单击单选按钮时如何在第二列中显示图像？
[英]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>
So, basically I want that whenever i click on a radio button in the first column, I get the image of the location's flag in the second column?
所以，基本上我希望每当我点击第一列中的单选按钮时，我都会在第二列中获得该位置标志的图像？ In HTML please.请在 HTML 中。
2 个解决方案
解决方案1
0 2014-09-29 23:19:41
You have to use JavaScript for this.为此，您必须使用 JavaScript。 Make an hidden div for each option in second column and make particular one visible with JavaScript on option select.为第二列中的每个选项制作一个隐藏的 div，并在选项选择时使用 JavaScript 使特定的选项可见。
解决方案2
0 2014-09-30 00:40:43
Some what ugly CSS solution, as I mentioned in my comment above this can't be done in pure HTML, this is as close as you'll get.一些丑陋的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>
This is dependant on the Adjacent Sibling selector so you can't move the image to a seperate table cell.这取决于相邻兄弟选择器，因此您不能将图像移动到单独的表格单元格。
Or if you prefere cleaner HTML with slightly more complex CSS:或者，如果您更喜欢更简洁的 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.