Замена переключателей с разными изображениями

Question

Мне нужно создать группу из 2 переключателей (варианты: мужской / женский), которые отображают изображения вместо реальных кнопок.Изображения должны измениться после выбора.Таким образом, должно быть 4 изображения: мужчина (вкл), мужчина (выкл), женщина (вкл), женщина (выкл).

Я использую jQuery по всему сайту, и я хотел бы также использовать jQuery для этого, если это возможно.

Я нашел различные плагины, которые заменяют элементы управления формы, ииспользуя imageTick для замены флажка, все работает нормально.Однако я не могу понять, как адаптировать плагин, поэтому я могу использовать разные изображения в одной группе переключателей.

Спасибо!

Answer 1

Я изменил плагин для удовлетворения ваших потребностей. Теперь он может отображать пользовательские изображения для каждой радиокнопки в зависимости от ее состояния. Прокомментируйте, если вы найдете какие-либо ошибки:)

Демо: 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
/2544208/zamena-pereklychatelei-s-raznymi-izobrazheniyami
******************************************/

(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:

$(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, чтобы применять соответствующие изображения на основе имеющихся классов.