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

Question

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 1

As you just want to hide the default image try this code, changes done in jquery :

<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);

$('.def-img').css({'display':'none'}); // this will disappear the image

});
</script>

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

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

Answer 2

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

 <style> .thumbnail img{ width:50px; height:50px;} </style> <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 <div class="defaultImage"> <img src="images/image2.jpg" width="50px" height="50px"/> </div> <div id="showoption" class="thumbnail" style="width:50px;height:50px"> </div> </label>

Answer 3

Just change the src value on click radio button. and must set radio button name attribute.

<form method="post" action="" enctype="multipart/form-data">
<input type="radio" value="image1.jpg" name="show"><img src="images/image1.jpg" width="50px" height="50px"><br/>
<input type="radio" value="image2.jpg" name="show"><img src="images/image2.jpg" width="50px" height="50px"><br/>
<input type="radio" value="Both" name="show"/>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();
$('#image').attr('src', 'images/'+value);
    });
</script>
<label>Value</label>
<img src="images/image2.jpg" width="50px" height="50px" id="image" />
</label>

Answer 4

Here you are, try this code let me if it's fine for you.

 $("input:radio[type=radio]").click(function() { var value = $(this).val(); if(value == 1) { $('#image2').hide(); $('#image1').show(); } else if(value == 2) { $('#image2').show(); $('#image1').hide(); } else if(value == 'Both') { $('#image2').show(); $('#image1').show(); } $('#showoption').html(value); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <form method="post" action="" enctype="multipart/form-data"> <input type="radio" name="image" value="1"> <input type="radio" name="image" value="2"> <input type="radio" value="Both" name="image" />Both<br/> </form> <label>Value</label> /// default image <img src="images/image2.jpg" width="50px" height="50px" id="image2" style="display:none;" alt="image2"/> <img src="images/image1.jpg" width="50px" height="50px" id="image1" style="display:none;" alt="image1"> <div id="showoption"> </div> </label>