Как настроить флажок, добавить фоновое изображение

Question

Мне нужно преобразовать флажок по умолчанию в этот

Можно использовать все, фоновое изображение, CSS3, jQuery.

http://jsfiddle.net/jitendravyas/uGYv6/

Answer 1

Если вы не против использования существующего инструментария, jQuery UI Button может превратить флажки в пользовательские кнопки, поддерживающие четыре основных визуальных состояния (плюс еще одно состояние наведения):

Однако, чтобы иметь возможность использовать эту функцию так, как вы хотите (используя атрибут value в качестве метки), вам нужно будет присвоить id атрибуты своим флажкам и добавить элементы <label>, которые обратитесь к этим идентификаторам и представьте значение их флажка как их внутренний текст. Вы можете изменить разметку вручную:

<input type="checkbox" id="nutri" name="nutri" value="select">
<label for="nutri">select</label>

Или изменить его динамически:

$("input:checkbox").each(function(index) {
    $("<label>").text(this.value)
                .attr("for", this.id = "checkbox" + index + 1)
                .insertAfter(this);
});

С этого момента это так же просто, как вызвать button() на флажке или buttonset() на контейнере. Конечно, если ни одна из стандартных тем jQuery UI не подходит для вашего проекта, вы можете создать свой собственный стиль для каждого визуального состояния с помощью ThemeRoller .

Вы можете найти живое демо в этой скрипке .

Answer 2

Вы можете использовать чистый CSS.Просто добавьте метку после вашего флажка:

#check_box {

    display:none;

}

#check_box + label{

    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}


#check_box:checked + label{

    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;

}

Answer 3

$('#yourCheckbox').hide().after($('<img/>', { src: 'blah.png', alt: 'whatever' }).click(function(){
    $(this).prev('input:checkbox').click();
}));

Возможно, вы также можете создать ярлык, содержащий изображение.Тогда вы можете избавиться от обработчика click().