获取无线电img标签的src选择

Question

我有一些HTML代码如下：

<div id="input-option227"> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="option[227]" value="17" /> 
      <img src="http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg" alt="black" class="img-thumbnail" /> 
      black 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="option[227]" value="18" /> 
      <img src="http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg" alt="green" class="img-thumbnail" /> 
      green 
     </label> 
    </div> 
</div> 

我想要得到的img src当我选择的单选按钮是指当无线电值为17，然后我想提醒：

http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg

当值是18，则警报应该是：

http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg

我迄今所做的是：

$(document).ready(function() { 
    $('input:radio[name="option[227]"]').change(function() { 
     if ($(this).val() == '17') { 
      alert('type A'); 
     } 
     if ($(this).val() == '18') { 
      alert('type B'); 
     } 
    }); 
}); 

我应该怎么办？

Answer 1

请看看这段代码片段。我用$.closest和$.find找到与单选按钮相关的img标签。

$(document).ready(function(){ 
 
    $('input:radio').change(function() { 
 
     var closestLable = $(this).closest("label"); 
 
     var imgTag = closestLable.find("img.img-thumbnail"); 
 
     var src = imgTag.attr("src"); 
 
     alert(src); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="input-option227"> 
 
           <div class="radio"> 
 
        <label> 
 
        <input type="radio" name="option[227]" value="17" /> 
 
        <img src="http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg" alt="black" class="img-thumbnail" /> black          </label> 
 
       </div> 
 
           <div class="radio"> 
 
        <label> 
 
        <input type="radio" name="option[227]" value="18" /> 
 
        <img src="http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg" alt="green" class="img-thumbnail" /> green          </label> 
 
       </div> 
 
           </div> 
 
      </div>

Answer 2

点击单选按钮是您想要定位的图像的前一个兄弟。你可以沿着使用.next()选择与点击单选按钮上下文对象的图像 ：

$('input:radio[name="option[227]"]').change(function() { 
    alert($(this).next().attr('src')); 
}); 

Working Demo

Answer 3

您可以使用家长选择，找到上去的水平，并得到IMG SRC

$(document).ready(function(){ 
    $('input:radio[name="option[227]"]').change(function() { 
     alert($(this).parent().find('img').attr('src')); 
    }); 
}); 

Fiddle

Answer 4

试试这个

jQuery('input:radio[name="option[227]"]').change(function() { 
     alert($(this).next().attr('src')); 
}); 

Answer 5

$('input:radio').change(function() { 
    if($(this).is(':checked')) { 
     alert($(this).siblings('.img-thumbnail').attr('src')); 
    } 
}); 

使用的兄弟姐妹选择和使用图像的类选择

demo