0

我正在尝试使用单选按钮在 HTML 中创建一个表单作为选项。单选按钮需要是单独的可点击缩略图（因此不会看到浏览器样式的单选按钮，并且每个单选按钮都不同）。将有 3 组单选按钮，每组有 3 个选项。

这些需要在最后结合起来，根据用户选择的选项在页面的其他地方显示更大的主图像。

当用户选择每个选项时，我希望主图像动态变化。- 我不想要最后带有提交按钮的表单。

请问有人有什么想法吗？

我到目前为止的代码是：

    <style>
label {display:block;}
.radio {
    opacity: 0.5;
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;                   
}
.checked {opacity: 1;}
#single {background: url(a.jpg);}
#double {background: url(b.jpg);}
#none {background: url(c.jpg);}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script type="text/javascript">   
$(function() {
    $('input[type=radio].radio-image').each(function() {
        var id = this.id;
        $(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
    });
    $('.newrad').live('click', function(e) {
        e.preventDefault();
        var $check = $(this).prev('input');
        $('.newrad div').attr('class', 'radio');
        $(this).find('div').addClass('checked');
        $('input[type=radio].radio-image').attr('checked', false);
        $check.attr('checked', true);
    });
});

    $(document).ready(function() {
        $("input:radio[name=wardrobe]").change(function() {
            if (this.value == "a") {
                $("#imgOne").attr(
                    'src', 'a.jpg'
                );
            }
            else {
                $("#imgOne").attr(
                    'src', 'b.jpg'                   
                );
            }
        });
    });
</script>

</head>

<body>


<form>
 <label><input type="radio" class="radio-image" name="wardrobe" id="single"    value="a" />A</label>
 <label><input type="radio" class="radio-image" name="wardrobe" id="double"  value="b" />B</label>
 <label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label>
 </form>


<img id="imgOne" />


</body>

这只是部分代码，对于第一组选项，我以它为起点。

我设法将缩略图作为单选按钮，效果很好。我设法获得了普通的单选按钮来交换图像。但我不能让两者一起工作。

4

1 回答 1

0

所以，我认为你在正确的轨道上。尽管我对隐藏按钮并将其替换为标签的功能有些困惑，但我相信您想要的是使缩略图图像具有单选按钮的功能。您所要做的就是更换当前的

<input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />

和

<img src="a.jpg" class="radio-image" data-ref="a"/>

并更改您的 jQuery 以允许这些新图像：

$(document).ready(function() {
    $('img.radio-image').click(function() {
        $("img.selected").removeClass("selected");
        $(this).addClass("selected");
        $("#imgOne").attr("src", $(this).attr("data-ref") + ".jpg");
    });
});

和CSS

img{
    border: 1px solid transparent;
}
.selected {
    border: 1px solid #00c;
}

诀窍是您的图像只需要坐在那里。让 jQuery 完成繁重的工作。我希望这有帮助。

于 2013-06-19T13:51:53.703 回答