单击单选按钮时如何获取第二列中显示的图像？

<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中。单击单选按钮时如何获取第二列中显示的图像？

来源

2014-09-29 Mahnoor Tariq

HTML是*标示语言*。它不起作用，它的目的是描述一个文件的布局。一般来说浏览器。要响应按钮点击，您需要使用浏览器端脚本语言（JavaScript）或服务器端编程语言。还有什么第二列？国旗图像在哪里？ – 2014-09-29 23:24:55

你必须使用JavaScript来做到这一点。为第二列中的每个选项设置一个隐藏div，并在选项选项中使用JavaScript显示特定的div。

来源

2014-09-29 23:19:41 Aqib1604

有些什么丑陋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>

来源

2014-09-30 00:40:43

单击单选按钮时如何获取第二列中显示的图像？

回答

相关问题