Farklı görüntülerle radyo düğmelerini değiştirme

Question

Gerçek düğmeler yerine görüntüleri görüntüleyen bir grup 2 radyo düğmesi (seçenekler: erkek/dişi) oluşturmam gerekiyor. Görüntüler seçim üzerine değişmelidir. Yani 4 resim olmalı: erkek (açık), erkek (kapalı), kadın (açık), kadın (kapalı).

Site genelinde jQuery kullanıyorum ve mümkünse jQuery'yi de bunun için kullanmak istiyorum.

Form denetimlerini değiştiren çeşitli eklentiler buldum ve onay kutusu değişimi için imageTick kullanıyorum, iyi çalışıyor. Bununla birlikte, eklentiyi nasıl uyarlayacağımı anlayamıyorum, bu yüzden bir radyo düğmesi grubundaki farklı görüntüleri kullanabilirim.

Teşekkürler!

Answer 1

İhtiyaçlarınızı karşılamak için eklentiyi değiştirdim. Artık her radyo düğmesi için durumuna bağlı olarak özel görüntüler gösterebilir. http://jsfiddle.net/mctcs/

kullanımı (opsiyon male değerleri ve female ile gender denilen radyo kutuları için):

$("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", 
}); 

Eklenti kaynak:

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

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

Eğer herhangi bir hata :)

Demo bulursanız Comment

Answer 2

Yapabilirsin kesinlikle sahte o:

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: CSS yoluyla ne gerekiyorsa Ardından yapabilirdi

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

sınıflar dayalı olarak uygun görüntülerini uygulamak mevcut.