jquery - Getting the src of an img tag on radio select -
i have html code follows:
<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>
i want img src
when select radio button means when radio value 17 want alert:
http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg
and when value 18 alert should be:
http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg
what have done far is:
$(document).ready(function() { $('input:radio[name="option[227]"]').change(function() { if ($(this).val() == '17') { alert('type a'); } if ($(this).val() == '18') { alert('type b'); } }); });
what should ?
please have @ code snippet. used $.closest
, $.find
locate img
tag associated radio button.
$(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>
Comments
Post a Comment