Как заменить переключатели с изображениями?

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

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

Я также столкнулся с этой статьей: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/, который я мог бы как-то изменить в моих целях.

Есть ли более простой/лучший способ?

Ответы

Ответ 1

JQuery

        $('input:radio').hide().each(function() {
            $(this).attr('data-radio-fx', this.name);
            var label = $("label[for=" + '"' + this.id + '"' + "]").text();
            $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
                '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
        });
        $('a.radio-fx').on('click', function(e) {
            e.preventDefault();
            var unique = $(this).attr('data-radio-fx');
            $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
            $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
            $(this).find('span').attr('class','radio-checked');
            $(this).prev('input:radio').attr('checked',true);
        }).on('keydown', function(e) {
            if ((e.keyCode ? e.keyCode : e.which) == 32) {
                $(this).trigger('click');
            }
        });
  • полный код в демонстрационном источнике;

Ответ 2

Да, есть! Это пример простых способов:

Нет необходимости в javascript

CSS

.radio_item{
display: none !important;
}

.label_item {
opacity: 0.1;
}

.radio_item:checked + label {
opacity: 1;
}

HTML

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1"> <img src="img_url_here"> </label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2"> <img src="img_url_here"> </label>

FIDDLE

Ответ 4

Я могу предложить два разных решения:

РЕШЕНИЕ CSS:

/*
  Hide radio button (the round disc)
  we will use just the label to create push button effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radio buttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

с HTML

<input type="radio" id="radio1" name="radios" value="all" checked>
   <label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios"value="false">
   <label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
   <label for="radio3">Nexus S</label>

JAVASCRIPT SOLUTION

Демо здесь

Ответ 5

У меня была такая же проблема всего лишь недавно, и я нашел это решение jQuery, которое отлично работает и ухудшается:

http://www.adamcoulombe.info/lab/jquery/select-box/

Я использовал его для выпадающих списков пользовательского стиля. Его очень легко реализовать. Замените переменную от $('.mySelectBoxClass'), которая, к примеру, нацелена на класс на $('select') - и это будет нацелено на все элементы выбора на вашей странице. Это же правило применимо для радиокнопок.

Ответ 6

Я не думаю, что вы найдете более простой способ сделать это, чем ссылку, добавленную в свой вопрос. Это единственный способ узнать. Думаю, вы ответили на свой вопрос. Разве нет значка для этого или чего-то еще?

Кроме того, на этот вопрос был дан ответ на этот вопрос: Упорядочить флажки, переключатели и выпадающие меню

Он содержит еще несколько готовых решений, которые вы можете проверить. Без дополнительной информации о том, что вы пытаетесь сделать визуально, я не могу сказать, будет ли кто-нибудь из них работать для вас.

Удачи!

Ответ 7

Существует ошибка с решением aSeptik, где, если вы нажмете отмеченный переключатель, он отменит его. Я скорректировал его, выполнив настройку ниже.

$('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        ...

так...

$('input:radio').hide().each(function() {
        $(this).attr('data-radio-fx', this.name);
        var label = $("label[for=" + '"' + this.id + '"' + "]").text();
        $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
            '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
    });
    $('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        var unique = $(this).attr('data-radio-fx');
        $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
        $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
        $(this).find('span').attr('class','radio-checked');
        $(this).prev('input:radio').attr('checked',true);
    }).on('keydown', function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 32) {
            $(this).trigger('click');
        }
    });

Спасибо aSeptik за отличное решение!