narendra narendra - 6 months ago 24
jQuery Question

how to change the image when click on selected radio button option

In my php file default image is there. i add some radio button options. here is my code



<form method="post" action="" enctype="multipart/form-data">
<input type="radio" value="<img src='images/image1.jpg'>"><img src="images/image1.jpg" width="50px" height="50px"><br/>
<input type="radio" value="<img src='images/image2.jpg'>"><img src="images/image2.jpg" width="50px" height="50px"><br/>
<input type="radio" value="Both" />Both<br/>
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("input:radio[type=radio]").click(function() {
var value = $(this).val();
$('#showoption').html(value);
});
</script>

<label>Value</label>
/// default image

<img src="images/image2.jpg" width="50px" height="50px"/>
<div id="showoption">


</div>
</label>





When i click on radio button selected image to be showing. I want at the same time default image to be hide. How to solve this issue.

Answer

I think you want like this: changes on in Jquery and add id to your default image.

<form method="post" action="" enctype="multipart/form-data">
<input type="radio" name="r1" value="<img src='images/image1.jpg'>"><img src="images/image1.jpg" width="50px" height="50px"><br/>
<input type="radio" name="r1" value="<img src='images/image2.jpg'>"><img src="images/image2.jpg" width="50px" height="50px"><br/>
<input type="radio" name="r1" value="Both" />Both<br/>
</form>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("input:radio[type=radio]").click(function() {
var value = $(this).val();
$('#showoption').html(value);
$('#defaultImage').hide();
    });
</script>
 
<label>Value</label>
    /// default image 

<img id="defaultImage" src="images/image2.jpg" width="50px" height="50px"/>
     <div id="showoption">
     
 
</div>
    </label>