How to Replace Radio Buttons with Images

How to replace radio buttons with images?

DEMO: http://so.lucafilosofi.com/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/

jQuery

        $('input:radio').hide().each(function() {
            $(this).attr('data-radio-fx', this.name);
            var label = $("label[for=" + '"' + this.id + '"' + "]").text();
            $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
                '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
        });
        $('a.radio-fx').on('click', function(e) {
            e.preventDefault();
            var unique = $(this).attr('data-radio-fx');
            $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
            $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
            $(this).find('span').attr('class','radio-checked');
            $(this).prev('input:radio').attr('checked',true);
        }).on('keydown', function(e) {
            if ((e.keyCode ? e.keyCode : e.which) == 32) {
                $(this).trigger('click');
            }
        });

full code in demo source;

Use images instead of radio buttons

Wrap radio and image in <label>
Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector +
Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

Change an image using radio buttons

Here in the code-editor your code works pretty well!

function changeSrc() {    if (document.getElementById("bunnybutton").checked) {    document.getElementById("picture").src = "https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg";    } else if (document.getElementById("kittybutton").checked) {     document.getElementById("picture").src = "http://cutewallpaperss.com/wp-content/uploads/2015/01/cute_cats__cats_picture_cute_wallpaperss_hd_for_mobile.jpg";    }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><form action="" id="animals"><input type="radio" id="bunnybutton" name="animal" value="bunny" onClick="changeSrc()">bunny<br><input type="radio" id="kittybutton" name="animal" value="kitty" onClick="changeSrc()">kitty    </form><img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" id="picture" width=600px>

How can I replace radio buttons with images using jQuery?

The answer by sfletche is correct, though you need not wrap the radio button inside the label, it just has to be in the same form.

Also if you want to hide the radio button use the display:none or visibility:hidden style.

<input type="radio" name="id[9]" value="70" id="attrib-9-70" class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-70">
    <img src="images/attributes/SL01_thumb.jpg" alt="Sample Image" width="100" height="100" />
</label>

In your css use:

.threads-opts{
    display:none;
    visibility:hidden;
}

Replacing radio buttons with different images

I modified the plugin to meet your needs. It now can display custom images for each radio button depending on its state. Comment if you find any bugs :)

Demo: http://jsfiddle.net/mctcs/

Use (for radio boxes called gender, with option values male and female):

$("input[name='gender']").imageTick({
    tick_image_path: { 
        male: "images/gender/male_checked.jpg", 
        female: "images/gender/female_checked.jpg"
        //"default": "images/gender/default_checked.jpg" //optional default can be used
    },
    no_tick_image_path: { 
        male: "images/gender/male_unchecked.jpg", 
        female: "images/gender/female_unchecked.jpg"
        //"default": "images/gender/default_unchecked.jpg" //optional default can be used
    },
    image_tick_class: "gender",
});

The plugin source:

/******************************************

Image Tick v1.0 for jQuery
==========================================
Provides an unobtrusive approach to image
based checkboxes and radio buttons
------------------------------------------
by Jordan Boesch
www.boedesign.com
June 8, 2008

Modified June 25, 2010:
- Radio buttons can have individual images
by Simen Echholt
http://stackoverflow.com/questions/3114166/#3114911
******************************************/

(function($){

    $.fn.imageTick = function(options) {

        var defaults = {
            tick_image_path: "images/radio.gif",
            no_tick_image_path: "no_images/radio.gif",
            image_tick_class: "ticks_" + Math.floor(Math.random()),
            hide_radios_checkboxes: false
        };

        var opt = $.extend(defaults, options);

        return this.each(function(){

            var obj = $(this);
            var type = obj.attr('type'); // radio or checkbox

            var tick_image_path = typeof opt.tick_image_path == "object" ?
                opt.tick_image_path[this.value] || opt.tick_image_path["default"] :
                opt.tick_image_path;

            var no_tick_image_path = function(element_id) {
                var element = document.getElementById(element_id) || { value: "default" };
                return typeof opt.no_tick_image_path == "object" ?
                    opt.no_tick_image_path[element.value] || opt.no_tick_image_path["default"]:
                    opt.no_tick_image_path;
            }

            // hide them and store an image background
            var id = obj.attr('id');
            var imgHTML = '<img src="' + no_tick_image_path(id) + '" alt="no_tick" class="' + opt.image_tick_class + '" id="tick_img_' + id + '" />';

            obj.before(imgHTML);
            if(!opt.hide_radios_checkboxes){
                obj.css('display','none');
            }

            // if something has a checked state when the page was loaded
            if(obj.attr('checked')){
                $("#tick_img_" + id).attr('src', tick_image_path);
            }

            // if we're deadling with radio buttons
            if(type == 'radio'){

                // if we click on the image
                $("#tick_img_"+id).click(function(){
                    $("." + opt.image_tick_class).each(function() {
                        var r = this.id.split("_");
                        var radio_id = r.splice(2,r.length-2).join("_");
                        $(this).attr('src', no_tick_image_path(radio_id))
                    });
                    $("#" + id).trigger("click");
                    $(this).attr('src', tick_image_path);
                });

                // if we click on the label
                $("label[for='" + id + "']").click(function(){
                    $("." + opt.image_tick_class).each(function() {
                        var r = this.id.split("_");
                        var radio_id = r.splice(2,r.length-2).join("_");
                        $(this).attr('src', no_tick_image_path(radio_id))
                    });
                    $("#" + id).trigger("click");
                    $("#tick_img_" + id).attr('src', tick_image_path);
                });

            }

            // if we're deadling with checkboxes
            else if(type == 'checkbox'){

                $("#tick_img_" + id).click(function(){
                    $("#" + id).trigger("click");
                    if($(this).attr('src') == no_tick_image_path(id)){
                        $(this).attr('src', tick_image_path);
                    }
                    else {
                        $(this).attr('src', no_tick_image_path(id));
                    }

                });

                // if we click on the label
                $("label[for='" + id + "']").click(function(){
                    if($("#tick_img_" + id).attr('src') == no_tick_image_path(id)){
                        $("#tick_img_" + id).attr('src', tick_image_path);
                    }
                    else {
                        $("#tick_img_" + id).attr('src', no_tick_image_path(id));
                    }
                });

            }

        });
    }

})(jQuery);

Replace html radio buttons with image using CSS (without jquery)

Please change your CSS

input[type=radio] {
margin:10px;
}

input[type=radio] + label {
filter     : none;
background : linear-gradient(to bottom, #ffffff, #cccccc);
background : -webkit-gradient( linear, left top, left bottom, from(#fff), color-stop(50%, #f9f9f9), to(#ccc));
text-shadow: 1px 1px 2px #fff;
font-family: 'Meiryo';
font-size: 14pt;
font-weight: 700;
width: 200px;
height: 100px;
line-height: 80px;
line-width: 160px;
padding: 15px 40px;
border: 1px solid #333;
border-radius: 5px;
font-family: 'Meiryo';
font-weight: 700;
max-width: 400px;
}

#radio_13Yes:checked + label{
filter     : none;
background : linear-gradient(to bottom, #13213b, #0088ce);
background : -webkit-gradient( linear, left top, left bottom, from(#13213b), color-stop(0.5,#3366cc), to(#0088ce));
border: 2px solid #333;
color: #fff;
text-shadow: 1px 1px 2px #333;
font-family: 'Meiryo';
font-size: 14pt;
font-weight: 700;
}
#radio_13No:checked + label{
filter     : none;
background : linear-gradient(to bottom, #cc0000, #FF1821);
background : -webkit-gradient( linear, left top, left bottom, from(#cc0000), color-stop(0.5,#FF1821), to(#FF1821));
border: 2px solid #333;
color: #fff;
text-shadow: 1px 1px 2px #333;
font-family: 'Meiryo';
font-size: 16pt;
font-weight: 700;
}

http://jsfiddle.net/0w5zLsp1/