如何用图像替换单选按钮

为什么要使用Javascript？有一个纯粹的CSS解决方案！

第一步-HTML：

<input type="radio" class="radio" name="radio" id="radio"> <label for="radio">Option</label>

第二步-CSS：

/* visually hide the default radio button */
.radio {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* make the label relative, add padding to the left for adding the custom radio button */
.radio + label {
    padding-left: 23px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 24px;
    margin: 8px 0;
}
/* :before will be our new button! */
.radio + label:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition(background 250ms ease-in-out);
    -moz-transition(background 250ms ease-in-out);
    -o-transition(background 250ms ease-in-out);
    transition(background 250ms ease-in-out);
    /* Your size */
    width: 10px;
    height: 10px;
    /* This should be: 0 - (height / 2) */
    margin-top: -5px;
    /* Your default background color */
    background: #f97e76;
}
.radio:checked + label:before {
    /* Your checked background color */
    background: #a8bd44;
}

当然它有很多CSS，但它是一个比使用Javascript更好的解决方案。

这是一个jsfiddle：http://jsfiddle.net/ninty9notout/GsSvF/

无耻的自插-这是我用纯CSS制作的一个页面，用来改变收音机和复选框的外观：http://hieroishere.com/flatui/

此方法使用伪元素。你可以阅读他们：

关于CSS播放：http://css-tricks.com/pseudo-element-roundup/

在MDN上：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

享受：）

您的选择器$('input[type=radio][name^=question]')会查找名称以"question"开头的复选框，但表单包含名称为q1、q2。。。

我刚刚在谷歌上搜索了一下，发现了这个：http://so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/这是对类似问题的回答。

JS/JQ:

    $(function () {
    $('input:radio').hide().each(function () {
        var label = $("label[for=" + '"' + this.id + '"' + "]").text();
        $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '') + ' class="radio-fx ' + this.name + '" href="#"><span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
    });
    $('.radio-fx').on('click', function (e) {
        $check = $(this).prev('input:radio');
        var unique = '.' + this.className.split(' ')[1] + ' span';
        $(unique).attr('class', 'radio');
        $(this).find('span').attr('class', 'radio-checked');
        $check.attr('checked', true);
    }).on('keydown', function (e) {
        if ((e.keyCode ? e.keyCode : e.which) == 32) {
            $(this).trigger('click');
        }
    });
    /* not needed just for sake ;)*/
    $('#form').submit(function () {
        var posts = $(this).serialize();
        if (posts != '') {
            alert(posts);
        } else {
            alert('please select something, then submit the form!');
        }
        return false;
    });
    $('#change-skin').change(function () {
        $('form table').attr('id', this.value);
    });
});

CSS：

   body {
        font-family: Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        text-align: center
    }
    form {
        text-align: left;
        width: 310px;
        margin: 20px auto
    }
    a.radio-fx span, a.radio-fx {
        display: inline-block;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #skin_1 .radio, #skin_1 .radio-checked, #skin_1 a.radio-fx {
        width: 32px;
        height: 32px;
    }
    #skin_2 .radio, #skin_2 .radio-checked, #skin_2 a.radio-fx {
        width: 16px;
        height: 16px;
    }
    #skin_3 .radio, #skin_3 .radio-checked, #skin_3 a.radio-fx {
        width: 24px;
        height: 24px;
    }
    #skin_1 .radio {
        background: url(http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0160/bullet_red.png) no-repeat;
    }
    #skin_1 .radio-checked {
        background: url(http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0160/bullet_green.png) no-repeat;
    }
    #skin_2 .radio {
        background: url(http://cdn4.iconfinder.com/data/icons/uidesignicons/radiobutton_no.png) no-repeat;
    }
    #skin_2 .radio-checked {
        background: url(http://cdn4.iconfinder.com/data/icons/uidesignicons/radiobutton_yes.png) no-repeat;
    }
    #skin_3 .radio {
        background: url(http://cdn2.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_05.png) no-repeat;
    }
    #skin_3 .radio-checked {
        background: url(http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_06.gif) no-repeat;
    }
    table {
        width: 300px;
        border: 1px solid #CCC;
        padding: 5px;
        background: whiteSmoke
    }
    td {
        border-bottom: 1px solid #CCC;
        padding: 5px;
    }
    h1 a, h2 a{
        color: inherit;
    }

HTML

<h1><a href="http://stackoverflow.com/questions/5112995/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo" class="question-hyperlink">Stackoverflow: Is there an easy way to replace radio button with Images (and a colored border
    for selected)</a></h1>
<h2><a href="so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/">Original: http://so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/#</a></h2>
<form id="form">
    <table id="skin_1" summary="layout table">
        <tr>
            <td>
                <input type="radio" name="music" value="1" />
            </td>
            <td>music 1</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="music" value="2" checked="checked" />
            </td>
            <td>music 2</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="music" value="3" />
            </td>
            <td>music 3</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="music" value="4" />
            </td>
            <td>music 4</td>
        </tr>
        <tr>
            <td colspan=2>
                <hr />
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="1" />
            </td>
            <td>stereo 1</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="2" />
            </td>
            <td>stereo 2</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="3" />
            </td>
            <td>stereo 3</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="4" />
            </td>
            <td>stereo 4</td>
        </tr>
        <tr>
            <td colspan=2>
                <hr />
            </td>
        </tr>
        <tr>
            <td>
                <input class="button" type="submit" name="submit" />
            </td>
            <td>
                <select id="change-skin">
                    <option value="skin_1">skin 1</option>
                    <option value="skin_2">skin 2</option>
                    <option value="skin_3">skin 3</option>
                </select>
            </td>
        </tr>
    </table>
</form>

不管怎样，我把它放在一个小提琴里给你：http://jsfiddle.net/B63PH/.