獲取無線電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