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

Я хочу отображать зеленое отмеченное изображение, когда флажок установлен, и когда не установлен пустой флажок. Я попытался установить флажок в div и установить div, но это не помогает мне. Любая идея, что делать? Ниже представлен результат, который я хочу.

Image

Ответ 1

Подобно этому с небольшим jQuery и css: DEMO

<div class="checkbox">
</div>

.checkbox{
   width: 23px;
   height: 21px;
   background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
   background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}

$(".checkbox").click(function(){
    $(this).toggleClass('checked')
});

Ответ 2

Как говорили другие, вы можете использовать параметр прокси-элемента (div) и изменить флажок флажка, отмеченный/непроверенный, когда нажата кнопка div. Ниже приведен рабочий пример именно того, что вам нужно: (я использовал простой javascript, чтобы читатели могли его быстро понять)

Пошаговое руководство:

1) Прежде всего создайте два класса css для проверенного состояния и одно для неконтролируемого состояния:

.image-checkbox {
    background:url(unchecked.png);
    width:30px;
    height:30px;
}

.image-checkbox-checked {
    background:url(checked.png);
    width:30px;
    height:30px;
}

2) Создайте HTML для DIV и флажков. Идея состоит в том, что для каждого флажка (input type = checkbox) у нас будет div. Идентификатор div будет помечен словом proxy, чтобы мы могли его идентифицировать. Также для каждого прокси-сервера мы назначим начальный класс .image-checkbox. Пусть говорят, что мы создаем два флажка:

<div id="checkbox1_proxy" class="image-checkbox" />
<div id="checkbox2_proxy" class="image-checkbox" />

Исходные флажки (скрыть его со свойством стиля [видимость: скрытый])

<input id="checkbox1" name="checkbox1" type="checkbox"  />
<input id="checkbox2" name="checkbox2" type="checkbox"  />

3) Теперь нам понадобится код javascript, чтобы установить флажок для проверки/снятия флажка при нажатии прокси-элементов (DIV). Также нам нужно изменить фоновое изображение прокси-разделов в соответствии с текущим состоянием флажка. Мы можем вызвать функцию для присоединения обработчиков событий при загрузке документа:

<body onload="load()">

<script type="text/javascript">
function load() {
    var all_checkbox_divs = document.getElementsByClassName("image-checkbox");

    for (var i=0;i<all_checkbox_divs.length;i++) {

        all_checkbox_divs[i].onclick = function (e) {
            var div_id = this.id;
            var checkbox_id =div_id.split("_")[0];
            var checkbox_element = document.getElementById(checkbox_id);

            if (checkbox_element.checked == true) {
                checkbox_element.checked = false;
                this.setAttribute("class","image-checkbox");
            } else {
                checkbox_element.checked = true;
                this.setAttribute("class","image-checkbox-checked");
        }

        };
    }

}
</script>

Вот и все... я надеюсь, что это поможет

Ответ 3

Кто-то спотыкается об этом во время поиска? Учитывайте этот подход только для CSS:

input[type=checkbox] {
    display: block;
    width: 30px;
    height: 30px;
    -webkit-appearance: none;
    outline: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

input[type=checkbox]:not(:checked) {
    background-image: url(unchecked.svg);
}

input[type=checkbox]:checked {
    background-image: url(checked.svg);
}



См. этот пример:

input[type=checkbox] {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-appearance: none;
    outline: 0;
}
input[type=checkbox]:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="#000" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}
input[type=checkbox]:not(:checked) {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}
<input type="checkbox" id="check" />
<div></div>

Ответ 4

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

Ответ 5

Вдохновленный ответом @asim-ishaq, вот решение на основе jquery, которое также учитывает тот факт, что пользователь может переключить этот флажок, нажав на тег метки:

<style>
    div.round-checkbox {
        background: transparent url(/css/icons-sprite.png) no-repeat -192px -72px;
        height: 24px;
        width: 24px;
        display: inline-block;

    }

    div.round-checkbox.checked {
         background: transparent url(/css/icons-sprite.png) no-repeat -168px -72px;
     }

    input.round-checkbox {
        display: none;
    }
</style>

<div class="round-checkbox" data-id="subscribe-promo-1"></div>
<input type='checkbox' class="round-checkbox" name='subscribe' value='1' id="subscribe-promo-1" />
<label for="subscribe-promo-1">I want to subscribe to offers</label>


<script>
    $(document).ready(function () {
        var jRoundCheckbox = $('input.round-checkbox');

        /**
         * Init: if the input.checkbox is checked, show the checked version of the div.checkbox,
         * otherwise show the unchecked version
         */
        jRoundCheckbox.each(function () {
            var id = $(this).attr('id');
            if ($(this).prop('checked')) {
                $('.round-checkbox[data-id="' + id + '"]').addClass("checked");
            }
            else {
                $('.round-checkbox[data-id="' + id + '"]').removeClass("checked");
            }
        });

        /**
         * If the user clicks the label, it will check/uncheck the input.checkbox.
         * The div.checkbox should reflect this state
         */
        jRoundCheckbox.on('change', function () {
            var id = $(this).attr('id');
            $('.round-checkbox[data-id="' + id + '"]').toggleClass("checked");
            return false;
        });

        /**
         * When the user clicks the div.checkbox, it toggles the checked class;
         * also, the input.checkbox should be synced with it
         */
        $('div.round-checkbox').on('click', function () {
            var id = $(this).attr('data-id');
            var jInput = $('#' + id);
            jInput.prop("checked", !jInput.prop('checked'));
            $(this).toggleClass("checked");
            return false;
        });
    });
</script>

Ответ 6

Знайте, что это более старый поток, но нужно решение для преобразования флажков в изображения.:) Здесь версия jQuery, которая отлично работает для меня - хотела поделиться.

function setCheckboxImageSrc(checkbox, image, checkedUrl, uncheckedUrl) {
    if (checkbox.is(":checked")) {
        image.attr("src", checkedUrl);
    } else {
        image.attr("src", uncheckedUrl);
    }
}

function setCheckboxImage(checkboxObj, className, checkedUrl, uncheckedUrl) {
    checkboxObj.hide();

    var $image = $("<img src='" + checkedUrl + "' />").insertAfter(checkboxObj);
    setCheckboxImageSrc(checkboxObj, $image, checkedUrl, uncheckedUrl);

    $image.click(function () {
        var $checkbox = $image.prev("." + className);
        $checkbox.click();
        setCheckboxImageSrc($checkbox, $image, checkedUrl, uncheckedUrl);
    });
}

$(".checkboxUp").each(function () {
    setCheckboxImage($(this), "checkboxUp", "../../../images/DirectionUpChecked.png", "../../../images/DirectionUpUnchecked.png");
});

$(".checkboxDown").each(function () {
    setCheckboxImage($(this), "checkboxDown", "../../../images/DirectionDownChecked.png", "../../../images/DirectionDownUnchecked.png");
});

Ответ 7

Вот еще один пример. Отлично работает на Ionic v1. CSS

input[type=checkbox] {
    display: none;
}

 :checked+img {
    content: url('/img/active.png');
}

HTML

    <label>
    <input type="checkbox" ng-model="anything">
    <img style="height:30px;" src="img/deactive.png">
    </label>
    <span>{{anything}}</span>