使用JQuery将单选按钮替换为图像

我有一组单选按钮，我想在检查和取消选中时用图像替换它们。

 radio1
 radio2
  

我有两个图像1. button_on.JPG用于选中单选按钮，2。button_off.JPG用于未选中单选按钮。 我想完成以下任务1.我想用这些图像替换单选按钮。 2.在加载页面时，单选按钮应具有正确的图像。

注意：单选按钮是动态生成的，它们的ID和值在每个请求中都会发生变化。

我需要使用Jquery的帮助。 赞赏你的意见。

Answer 1

不要重新发明轮子，为此使用一个漂亮的库：

http://uniformjs.com/

Answer 2

以下代码执行两项操作：1。替换加载时的单选按钮。 2.单击图像时更改它们。 我不打算认为它适合你的情况，但它应该足以让你开始。

 // on load $(function() { // replace the checkboxes with the images $("input name='answeroption']").each(function() { if ($(this).attr('checked')) { // radio button is checked onload $(this).hide(); $(this).after($("")); } else { // radio button is not checked $(this).hide(); $(this).after($("")); } }); // setup click events to change the images $("input.radioButtonImage").click(function() { if($(this).attr('src') == 'http://sofzh.miximages.com/jquery/button_on.jpg') { // its checked, so uncheck it $(this).attr('src', 'http://sofzh.miximages.com/jquery/button_off.jpg'); $(this).prev().attr('checked', 'false'); } else { // its not checked, so check it $(this).attr('src', 'http://sofzh.miximages.com/jquery/button_on.jpg'); $(this).prev().attr('checked', 'true'); } }); });