单击单选按钮时如何获取第二列中显示的图像？
问题描述：
<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中。单击单选按钮时如何获取第二列中显示的图像？
答
你必须使用JavaScript来做到这一点。为第二列中的每个选项设置一个隐藏div，并在选项选项中使用JavaScript显示特定的div。
答
有些什么丑陋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>这取决于Adjacent Sibling selector所以你不能将图像移动到一个单独的表格单元格。
或者，如果您prefere清洁与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>
HTML是*标示语言*。它不起作用，它的目的是描述一个文件的布局。一般来说浏览器。要响应按钮点击，您需要使用浏览器端脚本语言（JavaScript）或服务器端编程语言。还有什么第二列？国旗图像在哪里？ – 2014-09-29 23:24:55