<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 方法一（麻烦）
function put() {
var len = document.getElementsByName('RA');
for (var i = 0; i < len.length; i++) {
if (len[i].checked == true) {
var a = len[i].getAttribute('value');
switch (a){
case '1':
document.getElementById('img1').setAttribute('src', 'images/1.jpg');
break;
case '2':
document.getElementById('img1').setAttribute('src', 'images/2.jpg');
break;
case '3':
document.getElementById('img1').setAttribute('src', 'images/3.jpg');
break;
default:
document.getElementById('img1').setAttribute('src', 'images/4.jpg');
break;
}
}
}
}
//方法二（简单）
function UpdateImg(radio) {
//简写方式
//document.getElementById('img1').setAttribute('src', 'images/' + radio.getAttribute('value') + '.jpg');
var numb = radio.getAttribute('value'); //获取被选中的单选按钮的value值
document.getElementById('img1').setAttribute('src', numb); //设置要加载的图片
}
</script>
</head>
<body>
<img ></body>
</html>
开始界面，默认一张图片
点击忧伤的小狗图片更换