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标记。

＆＃13;

$(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);
    });
});

＆＃13;

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

＆＃13;

Answer 2

单击单选按钮是您要定位的图像的上一个兄弟。您可以使用.next()选择器以及单击的单选按钮上下文来定位图像：

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

<强> Working Demo

Answer 3

试试这个

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

Answer 4

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

使用兄弟选择器并使用图像类选择

demo

Answer 5

您可以使用父选择器并找到上升级别并获取img src

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

Fiddle

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

5 个答案: