Replace switches with various images

Question

I need to create a group of two radio buttons (options: male / female) that display images instead of real buttons. Images must be changed when selected. Thus, there should be 4 images: male (on), male (off), female (on), female (off).

I use jQuery throughout the site, and I would like to use jQuery for this, if possible.

I found various plugins that replace form controls, and I use imageTick to replace the checkbox, it works fine. However, I cannot figure out how to adapt the plugin, so I can use different images in the same switch group.

Thanks!

Answer 1

I modified the plugin to suit your needs. Now it can display custom images for each switch depending on its state. Comment if you find any errors :)

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

Use (for radio frames 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", }); 

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); 

Answer 2

You could, of course, fake it:

HTML:

 <ul> <li><span class="radio">Value 1</span> Label 1</li> <li><span class="radio">Value 2</span> Label 2</li> <li><span class="radio">Value 3</span> Label 3</li> </ul> <input type="submit" /> 

JQuery

 $(function(){ $('.radio').live('click', function(){ $('.radio').removeClass('selected'); $(this).addClass('selected'); }); $('input[type=submit]').live('click', function(){ var data = { "myRadioValue" : $('.radio.selected').text() }; $.post('myurl.com', data, function(result){ console.log('hooray!', result); }); }); }); 

Then you can do whatever you need with CSS to apply the appropriate images based on the classes present.