单击选定的单选按钮选项时如何更改图像

Question

在我的php文件中，默认图像就在那里。我添加一些单选按钮选项。这是我的代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我点击单选按钮时所选图像显示。我想同时隐藏默认图像。如何解决这个问题。

Answer 1

由于您只想隐藏默认图像，请尝试使用此代码，在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

我认为你想要这样：在Jquery中进行更改并将id添加到默认图像。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需更改单击单选按钮上的src值即可。并且必须设置单选按钮名称属性。

<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

在这里，试试这个代码，如果它适合你，请告诉我。

$("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>