Question

我有4-5个单选按钮，每个按钮下面都有一个图像。我想在检查按钮时将图像更改为另一个图像。如果要检查所选内容然后将图像放在该图像上，我可以用4来做，但我想用几行作为所有单选按钮的相同图像。我开始这样做了：

CSS

#selectedRadio {
        display:none;
        width:74px;
        height:69px;
        position:absolute;
        margin-top:20px;
}

Jquery的

<script>
jQuery(function(){
        jQuery("input[name=choose]").change(function(){          
            if ($(this).is(":checked")) {
                jQuery("#selectedRadio").slideDown()
            }                                                       
       });
});
</script>

HTML

<div id="selectedRadio"><img src="selected.png" /></div>
<input name="choose"  value="black"> <br><img src ="black.jpg" />
<input name="choose"  value="white"> <br><img src ="white.jpg" />
<input name="choose"  value="red"> <br><img src ="red.jpg" />
<input name="choose"  value="blue"> <br><img src ="blue.jpg" />

Answer 1

我创建了a fiddle that shows one way of doing this。

这是HTML：

<div class="container">
    <label>
        <input type="radio" name="choose" value="black"/>
        <img src="black.jpg" alt="black image" data-color="black" />
    </label>
    <label>
        <input type="radio" name="choose" value="white"/>
        <img src="white.jpg" alt="white image" data-color="white" />
    </label>
    <label>
        <input type="radio" name="choose" value="red"/>
        <img src="red.jpg" alt="red image" data-color="red" />
    </label>
    <label>
        <input type="radio" name="choose" value="blue"/>
        <img src="blue.jpg" alt="blue image" data-color="blue" />
    </label>
</div>

这是JS：

$(function () {
    $('label').click(function () {
        var that = this,
            images = $(this).closest('div.container').find('img');
        images.each(function () {
            var t = $(this);
            if (t.data('color') === $(that).find('input').val()) {
                t.attr({
                    src: 'selected.png',
                    alt: 'selected image'
                });
            } else {
                t.attr({
                    src: t.data('color') + '.jpg',
                    alt: t.data('color') + ' image'
                });
            }
        });
    });
});

一些基本造型：

label {
    display: inline-block;
    width:150px;
}
input,
img {
    display: block;
}

同样，这只是一种可能的方式，以实现这一概念。

Answer 2

也许使用hide（）/ show（）方法？ http://www.w3schools.com/jquery/jquery_hide_show.asp

选中单选按钮时如何在图像上放置图像？

2 个答案: