Create simple radio buttons with images using jQuery without the sweat

View project onGitHub

Welcome to radioimg.js

This is one of the easiest way to create radio buttons using images.

Basic example without any data


To add some data

        data: [ 
          {data: "A5", img: ""},
          {data: "A4", img: ""},
          {data: "A3", img: ""}

Setup trigger event to detect changes

$('.test').on('change', function(event, val){

Other options available - defaults shown

    name: "radioimg",
    selectedClass: "radioimg-selected", // Important to setup styling
    class: "radioimg",
    debug: false, // Set to true to show radio buttons
    color: "black",
    initial: "not set", // Choose which value should be selected on creation
    data: [{data: "1", img: ""}, {data: "2", img: ""}]

Sample styling

.radioimg {
    border: 3px solid transparent;

.radioimg-selected {
    border: 3px solid red;

.radioimg:hover {
    border: 3px dotted rgba(121,121,121, 0.5);