<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index-01</title>
<style>
img{
width: 100px;
padding: 10px;
}
td{
text-align: center;
}
</style>
<script>
function showsrc(){
var summer = document.getElementsByName("summer");
var showsrcp = document.getElementById("showsrcp");
var str = "";
for(var i in summer){
if(summer[i].checked == true){
switch(summer[i].value){
case "01": str = str +"img/伞.png" + " "; break;
case "02": str = str +"img/冰棍.png" + " "; break;
case "03": str = str +"img/冰淇淋.png" + " ";
}
}
}
showsrcp.innerHTML = str;
}
</script>
</head>
<body>
<table>
<tr>
<td> <img src="img/伞.png" /> </td>
<td> <img src="img/冰棍.png" /> </td>
<td> <img src="img/冰淇淋.png" /> </td>
</tr>
<tr>
<td> <input type="checkbox" name="summer" value="01" />雨伞 </td>
<td> <input type="checkbox" name="summer" value="02" />冰棍</td>
<td> <input type="checkbox" name="summer" value="03" />冰淇淋 </td>
</tr>
</table>
<br />
<input type="button" value="显示图片路径" onclick="showsrc()" style="width:100px;height: 30px;background-color:dodgerblue;color: white;font-size: 15px;border: 0px;" />
<p id="showsrcp"></p>
</body>
</html>
