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用于未选中单选按钮。我想完成以下任务我想用这些图像替换单选按钮。 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($("<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');
        }
    });
});

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

2 个答案: