jquery - 使用 ID 用图像替换单选按钮

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

我正在寻求用不同的图像替换标准输入 radio ，​​基本上是 radio 本身的视觉分级尺度，并且我需要一个跨浏览器解决方案，该解决方案不依赖于使用标签标签，就像许多其他解决方案一样。我已经将标签标记用于实际的问题文本。我想通过定位输入的 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
});