如何使用javascript在html中单击单选按钮更改图像？ [英] How do I change image on click of radio button in html using javascript?
本文介绍了如何使用javascript在html中单击单选按钮更改图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用javascript在html中单击单选按钮来更改图像，但它似乎没有改变。我尝试使用以下代码但它不起作用。请提示如果代码中有错误并建议我纠正它。
这里是代码：
< html>
< head>
< title>示例< / title >
< script 类型 = text / javascript >
function ChangeImage（newimage）
{
document .rd.src = newimage;
}
< / script>
< / head >
< body>
< h1>图片< / h1 > <峰; br>
< img src = C：\Documents and Settings \ All Users \Documents \我的图片\Sample Pictures\Sunset.jpg name = rd width = 100px height = < span class =code-string> 100px>
< input type = radio value =aname =rd1önclick=ChangeImage（'C：\Documents and Settings \ All Users \Documents\My Pictures \Sample
Pictures \Winter.jpg'）>冬天
<输入类型=无线电值=b名称=rd1önclick=ChangeImage（'C：\Documents and Settings \ All Users \ Document \ MyMy Pictures \Sample Pictures \\ \\Blue
hills.jpg'）>蓝山丘陵
<输入类型=无线电值=cname =rd1önclick=ChangeImage（'C：\文件和集tings \所有用户\ Documents \我的照片\样品图片\水
lilies.jpg'）>睡莲
< div id = 'imagedest >
< / div>
< / body>
< / html>< / br>
解决方案
试试这样：
< script 语言 = javascript type = text / javascript >
function check_value（）{
switch（document.test.field.value）{
caseone：
document。 getElementById（imagetest）。innerHTML =< img src =' images / firstimage。 png' > ;
休息;
casetwo：
document.getElementById（imagetest）。innerHTML =< img src =' images / secondimage.png' > ;
休息;
casethree：
document.getElementById（imagetest）。innerHTML =< img src =' images / thirdimage.png' > ;
休息;
}
}
< / script >
< 表格 名称 =' bob' >
< 输入 type = radio 名称 = 字段 value = one onchange =' check_value（）' > 一个
< 输入 type = radio name = 字段 值 = 两个 onchange =' check_value （）' > 两个
< < span class =code-leadattribute> input type = radio name = field value = 三 onchange =' check_value（）' > 三个
< / form >
< div id =' imagetest' >
< / div >
I am trying to change image on click of radio button in html using javascript,but it doesnt seem to change.I have tried with following code but its not working.Please suggest if there is something wrong in code and advice me to correct it.
here's the code:
<html>
<head>
<title>sample</title>
<script type="text/javascript">
function ChangeImage(newimage)
{
document.rd.src=newimage;
}
</script>
</head>
<body>
<h1>image</h1><br>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Sunset.jpg" name="rd" width="100px" height="100px">
<input type=radio value="a" name="rd1" önclick="ChangeImage('C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg')">Winter
<input type=radio value="b" name="rd1" önclick="ChangeImage('C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Blue
hills.jpg')">Blue hills
<input type=radio value="c" name="rd1" önclick="ChangeImage('C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water
lilies.jpg')">Water lilies
<div id="'imagedest">
</div>
</body>
</html></br> 解决方案
Try like this :
<script language=javascript type=text/javascript> function check_value(){ switch(document.test.field.value){ case "one": document.getElementById("imagetest").innerHTML = "<img src='images/firstimage.png'>"; break; case "two": document.getElementById("imagetest").innerHTML = "<img src='images/secondimage.png'>"; break; case "three": document.getElementById("imagetest").innerHTML = "<img src='images/thirdimage.png'>"; break; } } </script> <form name='bob'> <input type="radio" name="field" value="one" onchange='check_value()'>one <input type="radio" name="field" value="two" onchange='check_value()'>two <input type="radio" name="field" value="three" onchange='check_value()'>three </form> <div id='imagetest'> </div>
这篇关于如何使用javascript在html中单击单选按钮更改图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
