用不同的图像替换单选按钮
我需要创建一组2个单选按钮（选项：男/女），显示图像而不是实际按钮。 图像应根据选择而改变。 所以应该有4个图像：男性（上），男性（关闭），女性（上），女性（关闭）。
我在整个网站上使用jQuery，如果可能的话，我也想使用jQuery。
我找到了各种替换表单控件的插件，我使用imageTick替换复选框，它工作正常。 但是，我无法弄清楚如何调整插件，因此我可以在一个单选按钮组中使用不同的图像。
谢谢！
我修改了插件以满足您的需求。 它现在可以根据其状态显示每个单选按钮的自定义图像。 评论，如果你发现任何错误:)
演示： http ： //jsfiddle.net/mctcs/
使用（对于称为gender无线电盒子，选项值为male和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", });
插件来源：
/****************************************** 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 = ' + ')
'; 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);
你当然可以假装它：
HTML：
- Value 1 Label 1
- Value 2 Label 2
- Value 3 Label 3
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); }); }); });
然后，您可以通过CSS执行任何操作，根据当前的类应用适当的图像。