Replacing radio buttons with images using ID

Question

I'm looking to replace the standard input radios with different images, basically a visual grading scale in the radios themselves, and I need a cross-browser solution that does not rely on using the label tag as many others have. I am already using the label tag for the actual question text. I want to do this by targeting the ID's of the inputs to do the image switch. Can this be done with jquery? As I said, the label tag cannot be used for this, and every example I saw for this uses label, which is not a possibility.

Basically, this is what I have as code.

 <label>Question Goes Here</label>
 <input type="radio" name="question1" id="Best"    value="5" />
 <input type="radio" name="question1" id="Better"  value="4" />
 <input type="radio" name="question1" id="Average" value="3" />
 <input type="radio" name="question1" id="Worse"   value="2" />
 <input type="radio" name="question1" id="Worst"   value="1" />

thecodeparadox · Answer 1 · 2012-09-12T14:31:13.137

2

var images = {
  Best: 'path_to_image',
  Better: 'path_to_image',
  Average: 'path_to_image',
  Worse: 'path_to_image',
  Worst: 'path_to_image'
};

$('input[type=radio][name^=question]').each(function() {
   var id = this.id;
   $(this)
          .hide()  // hide the radio button
          .after('<img src="'+ images[id] +'">'); // insert the image 
                                                  // after corresponding radio
});

edited Sep 12 '12 at 14:31

answered Sep 12 '12 at 14:25

thecodeparadox

86,271
21
138
164

awesome, but a question, the names will not be just question1, question2, etc... and this may be used for a much larger implimentation with possibily hundreds of names. This won't affect that will it? – user1628131 Sep 12 '12 at 14:26
@user1628131 I think it should not affect. If names are different then you can assign a common `class` name to them and use that `class` as selector and such trick. – thecodeparadox Sep 12 '12 at 14:28

score 1 · Answer 2 · edited May 23 '17 at 11:49

I've extended thecodeparadox's answer and added the essential functionality of a visible checked state. Here's the fiddle: http://jsfiddle.net/crowjonah/cfN5t

I restructured the inserted .after, and borrowing heavily from this answer, added a .live click function that will actually check and uncheck the hidden radio buttons, as well as give you the opportunity to change its appearance using CSS. I opted to use CSS background images rather than actual image tags with srcs stored in js variables, and added a .radio-image class to each input that we'll use as our jQuery selector to target only the radio buttons we want to turn into images. Here's the HTML:

<label>How good?</label>
 <input type="radio" class="radio-image" name="question1" id="best"    value="5" />
 <input type="radio" class="radio-image" name="question1" id="better"  value="4" />
 <input type="radio" class="radio-image" name="question1" id="average" value="3" />
 <input type="radio" class="radio-image" name="question1" id="worse"   value="2" />
 <input type="radio" class="radio-image" name="question1" id="worst"   value="1" />

The script:

   $(function() {
    $('input[type=radio].radio-image').each(function() {
        var id = this.id;
        $(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
    });
    $('.newrad').live('click', function(e) {
        e.preventDefault();
        var $check = $(this).prev('input');
        $('.newrad div').attr('class', 'radio');
        $(this).find('div').addClass('checked');
        $('input[type=radio].radio-image').attr('checked', false);
        $check.attr('checked', true);
    });
});

and the CSS (where we now define the images and optionally their checked states):

label {display:block;}
.radio {
    opacity: 0.5;
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;
}
.checked {opacity: 1;}
#best {background: url(http://www.placehold.it/80&text=Best);}
#better {background: url(http://www.placehold.it/80&text=Better);}
#average {background: url(http://www.placehold.it/80&text=Average);}
#worse {background: url(http://www.placehold.it/80&text=Worse);}
#worst {background: url(http://www.placehold.it/80&text=Worst);}

Ok, stupid question time, I'm trying to make it work in my environemnt, but it's not working. How can I make this work when I'm putting the javascript in it's own seperate js file? Thanks! — user1628131, Sep 12 '12 at 14:51
Well, make sure your separate js file is being loaded relatively early, but after jQuery itself, and then wrap all of the above with `$(document).ready(function(){...});` — crowjonah, Sep 12 '12 at 15:01
Ok, got it working now, thanks! Can definitely modify for my needs. Thanks! — user1628131, Sep 12 '12 at 15:16
It won't work on multiple question sets, questions with different names. — user1628131, Sep 13 '12 at 18:04

Replacing radio buttons with images using ID

2 Answers2