Reemplazo de botones de opción con imágenes diferentes

Question

Necesito crear un grupo de 2 botones de opción (opciones: masculino/femenino) que muestran imágenes en lugar de los botones reales. Las imágenes deberían cambiar con la selección. Entonces debería haber 4 imágenes: macho (on), male (off), female (on), female (off).

Estoy usando jQuery en todo el sitio, y me gustaría utilizar jQuery para esto, también, si es posible.

He encontrado varios complementos que reemplazan los controles de formulario y estoy usando imageTick para el reemplazo de la casilla de verificación, funciona bien. Sin embargo, no puedo entender cómo adaptar el complemento, así que puedo usar diferentes imágenes dentro de un grupo de botones de opción.

Gracias!

Answer 1

Modifiqué el complemento para satisfacer sus necesidades. Ahora puede mostrar imágenes personalizadas para cada botón de opción dependiendo de su estado. Comentar si encuentra algún error :)

Demostración: http://jsfiddle.net/mctcs/

uso (para las cajas de radio llamado gender, con la opción de valores male y 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", 
}); 

La fuente del plugin:

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

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

Decididamente puede fingir:

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

A continuación, podría hacer lo que necesita a través de CSS para aplicar la imagen adecuada en función de las clases presente.