Javascript 通过jQuery或其他工具使用图标实现图形选择列表

我正在实现一个HTML表单。对于其中一个字段（天气），用户必须从一组选项中选择一个（晴天、阴天、雨天等）

因此，基本上我正在寻找一个很好的

或

替代品，它提供了一系列图像（我将提供这些图像）供用户选择。我将为每个代表未选中项目的图像创建暗显/灰色版本

我发现很多jQuery评级控件都提供了这一点，但没有什么完全符合我的要求（可能是因为我真的不知道它叫什么，因此无法用谷歌搜索它）

---

哦，如果用户没有启用JavaScript，它应该会很好地降级，以提供标准的

或

选项。

您可以非常轻松地运行自己的脚本。从这样的标记开始：

<fieldset>
    <input type="radio" name="weather" value="sunny" />
    <input type="radio" name="weather" value="cloudy" />
    <input type="radio" name="weather" value="rainy" />
    <input type="radio" name="weather" value="class-3-kill-storm" />
</fieldset>

---

您可以看到使用背景色的版本。

这看起来很棒。一旦我重新编译了我的观点，我会尝试一下：哈，总是发生在我身上——在前端工作，后端开始与我斗争。好吧，现在我终于回到正轨了。顺便说一句，那个网站太棒了！我有一个网站运行您的方法，虽然我修改它只使用一个精灵图像。我很想把它捆绑成一个更抽象、更可重用的组件，因此我将研究如何制作jQuery插件。谢谢你的帮助。没问题，把所有图标转换成精灵也不错。如果你有机会编写插件，我很想看看。

$('input[name=weather]').each(function() {
    var radio = $(this);
    radio.css({display: 'none'});

    var icon = $('<a class="icon ' + this.value + '"></a>');
    icon.click(function(e) {
        // stop default link click behaviour
        e.preventDefault();

        // unmark any previously selected image and mark clicked selected
        icon.siblings('.icon').removeClass('selected');
        icon.addClass('selected');

        // set associated radio button's value
        radio.attr('checked', 'true');
    });
    $(this).parent().append(icon);
});

a.icon {
    float: left;

    /* width and height of your weather icons */
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
    background-position: 0 0;
}

a.selected,
a:hover.icon {
    background-position: 0 -20px;
}

.sunny{
    background-image: url(sunny.png);
}

.rainy {
    background-image: url(rainy.png);
}

/* remaining weather styles */