Wymiana przycisków radiowych na różne obrazy

Question

Potrzebuję utworzyć grupę 2 przycisków radiowych (opcje: męskie/żeńskie) wyświetlających obrazy zamiast rzeczywistych przycisków. Obrazy powinny się zmienić po selekcji. Powinno więc być 4 obrazy: męskie (włączone), męskie (wyłączone), żeńskie (włączone), żeńskie (wyłączone).

Używam jQuery w całej witrynie, a do tego chciałbym również użyć jQuery, jeśli to możliwe.

Znalazłem różne wtyczki, które zastępują formanty formularzy i używam imageTick do wymiany checkboxa, działa dobrze. Nie mogę jednak dowiedzieć się, jak zaadaptować wtyczkę, dzięki czemu mogę korzystać z różnych obrazów w ramach jednej grupy przycisków radiowych.

Dzięki!

Answer 1

Zmodyfikowałem wtyczkę zgodnie z Twoimi potrzebami. Teraz może wyświetlać niestandardowe obrazy dla każdego przycisku radiowego w zależności od jego stanu. Komentarz jeśli znajdziesz jakieś błędy :)

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

użyć (na polach radiowych zwanych gender z wartościami opcja male i 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", 
}); 

Źródłem wtyczki:

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

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

Można by oczywiście udawać:

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

Można wtedy zrobić co trzeba za pomocą CSS, aby zastosować odpowiednią obrazów opartą na klasach obecny.