다른 이미지로 라디오 버튼 바꾸기

Question

실제 버튼 대신 이미지를 표시하는 두 개의 라디오 버튼 그룹 (남성/여성 옵션)을 만들어야합니다. 선택시 이미지가 변경되어야합니다. 따라서 남성 (on), 남성 (off), 여성 (on), 여성 (off)의 4 가지 이미지가 있어야합니다.

나는 사이트 전체에서 jQuery를 사용하고 있으며 가능한 경우 jQuery도 사용하고 싶습니다.

양식 컨트롤을 대체하는 다양한 플러그인을 발견했으며 확인란 교체를 위해 imageTick을 사용하고 있습니다. 정상적으로 작동합니다. 그러나 플러그인을 적용하는 방법을 알 수 없으므로 하나의 라디오 버튼 그룹에서 다른 이미지를 사용할 수 있습니다.

감사합니다.

Answer 1

필요에 맞게 플러그인을 수정했습니다. 상태에 따라 각 라디오 버튼에 대한 사용자 정의 이미지를 표시 할 수 있습니다. http://jsfiddle.net/mctcs/

사용 (옵션 male 값과 female으로, gender라는 라디오 박스) :

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

플러그인 소스 :

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

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

당신은 할 수 확실히 가짜 :

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를 통해 무엇을해야 그런 다음 할 수

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

는 클래스에 따라 적절한 이미지를 적용합니다 선물.