使用 ID 将单选按钮替换为图像 [关闭]

Question

我希望用不同的图像替换标准输入收音机，基本上是收音机本身的视觉分级比例，我需要一个跨浏览器解决方案，它不像许多其他人那样依赖使用标签标签。我已经将标签标签用于实际问题文本。我想通过针对输入的 ID 来进行图像切换来做到这一点。这可以用jquery完成吗？正如我所说，标签标签不能用于此，我看到的每个示例都使用标签，这是不可能的。

基本上，这就是我的代码。

 <label>Question Goes Here</label>
 <input type="radio" name="question1" id="Best"    value="5" />
 <input type="radio" name="question1" id="Better"  value="4" />
 <input type="radio" name="question1" id="Average" value="3" />
 <input type="radio" name="question1" id="Worse"   value="2" />
 <input type="radio" name="question1" id="Worst"   value="1" />

Answer 1

var images = {
  Best: 'path_to_image',
  Better: 'path_to_image',
  Average: 'path_to_image',
  Worse: 'path_to_image',
  Worst: 'path_to_image'
};

$('input[type=radio][name^=question]').each(function() {
   var id = this.id;
   $(this)
          .hide()  // hide the radio button
          .after('<img src="'+ images[id] +'">'); // insert the image 
                                                  // after corresponding radio
});

Answer 2

我扩展了 codeparadox 的答案并添加了可见检查状态的基本功能。这是小提琴：http://jsfiddle.net/crowjonah/cfN5t

我对插入的.after 进行了重组，并大量借鉴this answer，添加了.live 点击功能，该功能将实际检查和取消选中隐藏的单选按钮，并让您有机会使用 CSS 更改其外观.我选择使用 CSS 背景图像而不是实际的图像标签，并将 srcs 存储在 js 变量中，并为每个输入添加了一个 .radio-image 类，我们将用作我们的 jQuery 选择器，仅针对我们想要转换为图像的单选按钮.这是 HTML：

<label>How good?</label>
 <input type="radio" class="radio-image" name="question1" id="best"    value="5" />
 <input type="radio" class="radio-image" name="question1" id="better"  value="4" />
 <input type="radio" class="radio-image" name="question1" id="average" value="3" />
 <input type="radio" class="radio-image" name="question1" id="worse"   value="2" />
 <input type="radio" class="radio-image" name="question1" id="worst"   value="1" />

脚本：

   $(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);
    });
});​

和 CSS（我们现在定义图像和可选的检查状态）：

label {display:block;}
.radio {
    opacity: 0.5;
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;
}
.checked {opacity: 1;}
#best {background: url(http://www.placehold.it/80&text=Best);}
#better {background: url(http://www.placehold.it/80&text=Better);}
#average {background: url(http://www.placehold.it/80&text=Average);}
#worse {background: url(http://www.placehold.it/80&text=Worse);}
#worst {background: url(http://www.placehold.it/80&text=Worst);}
​