1

I am looking for the javascript that change (image1) to (image2) and then back to (image1) right away when checkbox checked.

I have a code that swap the image when i checked the checkbox and going back to original image when checkbox is unchecked. But I want to change image and going back to original image right way when it checked. Can anyone help?

 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changePic(){
if (document.form1.check.checked){
document.picture.src="Images/industry_mrt.jpg";
document.picture.src="Images/industry_ps.jpg";
}

else{
document.picture.src="Images/industry_mrt.jpg";
}}
</script>
</head>

<body>
<img src="Images/industry_ps.jpg" id="picture" name="picture"> 
<form name="form1" method="post" action="">
<input type="checkbox" name="check" value="checkbox" onClick="changePic();">
</form>
</body>
</html>
4

1 回答 1

1

目前我相信您的代码确实具有预期的效果 - 更改图像，然后在选中复选框时立即返回原始图像，但如果您想看到这一点，您需要延迟返回原始图像。

试试下面的：

<form action="#" method="post">
    <input type="checkbox" onchange="handleChange(this);" />
</form>
<script type="text/javascript">
function handleChange(checkbox)
{
    if(checkbox.checked){
        document.picture.src="Images/industry_mrt.jpg";
        setTimeout(function(){document.picture.src="Images/industry_ps.jpg";}, 2000); // 2 Seconds.

    } else{
        document.picture.src="Images/industry_mrt.jpg";
    }
}
</script>
于 2013-01-15T19:13:19.980 回答