单选按钮作为图像，选中和未选中状态(jquery)

Question

我对jquery很陌生，我已经搜索了几个小时，试图将单选按钮创建为图像——用户可以点击填写问卷。我不想使用jqueryui，因为图像太难用jquery和css重新创建。

10个问题-每个问题3个答案。

我终于找到了这个似乎最有用的http://screwdefaultbuttons.com/

我想为每个单选按钮显示3个单独的图像，再加上选中其中任何一个时的3个图像。

有人能帮忙吗？现在只有一个图形是选中的，一个是未选中的。

如果有人有不同的解决方案，那也会很有帮助！

非常感谢！

Answer 1

您可以为每个不同风格的图像创建单独的类，并在css中为该类添加图像。

Answer 2

哇，这花了一段时间，在一个好朋友的帮助下，我想出了这个主意。

我有多组单选按钮，每个组的名称相同，组中每个单选按钮的id不同。

          <input type="radio" class="question" name="question1" id="q1A" value="A" /><label class="answer" for="q1A">Answer1</label>
          <input type="radio" class="question" name="question1" id="q1B" value="B" /><label class="answer" for="q1B">Answer2</label>
          <input type="radio" class="question" name="question1" id="q1C" value="C" /><label class="answer" for="q1C">Answer3</label>

然后在我的css中，我创建了一个隐藏类

.input_hidden {
position: absolute;
left: -9999px;

}

设置标签的类别与适当的图像，悬停等

对于jquery，隐藏所有单选按钮-在加载文档时执行。

$('.question:radio').addClass('input_hidden');

所以现在只显示标签而不显示单选按钮。单击图形时，将选择单选按钮。