單擊單選按鈕時如何獲取第二列中顯示的圖像？

<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

單擊單選按鈕時如何獲取第二列中顯示的圖像？

回答

相關問題