<script type="text/javascript">
//方法1：
function showclick() {
var Animal = document.getElementsByName('Animal');
for (var i = 0; i < Animal.length; i++) {
if (Animal[i].checked == true) {
var value = Animal[i].getAttribute('value');
switch (value) {
case '2':
document.getElementById('img1').setAttribute('src', 'image1/2.jpg');
break;
case '3':
document.getElementById('img1').setAttribute('src', 'image1/3.jpg');
break;
case '4':
document.getElementById('img1').setAttribute('src', 'image1/4.jpg');
break;
case '6':
document.getElementById('img1').setAttribute('src', 'image1/6.jpg');
break;
}
}
}
}
//方法2：
// function showclick(radio) {
// //简写方式
// //document.getElementById('img1').setAttribute('src', 'images/' + radio.getAttribute('value') + '.jpg');
// var numb = radio.getAttribute('value'); //获取被选中的单选按钮的value值
// document.getElementById('img1').setAttribute('src', 'images/' + numb + '.jpg'); //设置要加载的图片
// }
</script>
</head>
<body>
<img id="img1" alt="" src="image1/9.jpg" width="400px" height="500px"/>
<br />
<input id="Radio1" type="radio" name="Animal" value="2" οnclick="showclick()"/>忧伤的小狗
<input id="Radio2" type="radio" name="Animal" value="3" οnclick="showclick()"/>卖萌的小狗
<input id="Radio3" type="radio" name="Animal" value="4" οnclick="showclick()"/>愤怒的小狗
<input id="Radio4" type="radio" name="Animal" value="6" οnclick="showclick()"/>可爱的喵星人
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
