Замените переключатели с изображениями, используя JQuery

Question

У меня есть группа радиокнопок, которые я хочу заменить на изображения, когда они отмечены и не отмечены.

<div id="answerOptions">
<input type="radio" name="answeroption" id="r1" value="radio1" checked=''checked'/>radio1<br/>
<input type="radio" name="answeroption" id="r2" value="radio2"/>radio2<br/>
</div>

У меня есть два изображения: 1. button_on.JPG для проверенной радиокнопки и 2. button_off.JPG для не проверенной радиокнопки. Я хочу выполнить следующие задачи 1. Я хочу заменить радио-кнопки на эти изображения. 2. При загрузке страницы отмеченный переключатель должен иметь правильное изображение.

Примечание: переключатели генерируются динамически, и их идентификаторы, а также значение меняются при каждом запросе.

Мне нужна помощь с использованием 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($("<img src='button_on.jpg' class='radioButtonImage' />"));
        } else { // radio button is not checked
            $(this).hide();
            $(this).after($("<img src='button_off.jpg'  class='radioButtonImage' />"));
        }
    });

    // setup click events to change the images
    $("input.radioButtonImage").click(function() {
        if($(this).attr('src') == 'button_on.jpg') { // its checked, so uncheck it
            $(this).attr('src', 'button_off.jpg');
            $(this).prev().attr('checked', 'false');
        } else { // its not checked, so check it
            $(this).attr('src', 'button_on.jpg');
            $(this).prev().attr('checked', 'true');
        }
    });
});