0

我有 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" />
4

2 回答 2

1

我创建了一个小提琴，展示了这样做的一种方式。

这是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;
}

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

于 2013-04-23T15:45:03.140 回答
-1

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

于 2013-04-23T15:10:43.893 回答