web-dev-qa-db-fra.com

Comment afficher une image à la place de la case à cocher?

Je souhaite afficher une image cochée en vert lorsque la case à cocher est cochée et si cette case n'est pas cochée, la case est vide. J'ai essayé de mettre checkbox dans div et de définir le fond de div, mais cela ne m'aide pas. Une idée de ce qu'il faut faire? Ci-dessous la sortie que je veux.

Image

jquerycsshtml5
10
Dhwani

Comme ça avec un peu de jQuery et 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')
});
16
Anujith

Comme d'autres l'ont déjà dit, vous pouvez utiliser un élément proxy (div) et modifier l'état de la case à cocher activé/désactivé lorsque l'utilisateur clique sur la div. Voici un exemple pratique de ce dont vous avez besoin: (j’ai utilisé du javascript simple pour que les lecteurs puissent le comprendre rapidement)

Guide étape par étape:

1) Tout d’abord, créez deux classes CSS, une pour l’état contrôlé et une pour l’état non contrôlé:

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

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

2) Créez le code HTML pour les DIV et les cases à cocher. L'idée est que pour chaque case à cocher (type d'entrée = case à cocher) nous aurons un div. L'identifiant de la div sera suffixé par le proxy Word afin que nous puissions l'identifier. De plus, pour chaque div de proxy, nous attribuerons la case initiale .image-check box. Disons que nous créons deux cases à cocher:

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

Cases à cocher originales (masquer avec la propriété de style [visibilité: masqué])

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

3) Nous avons maintenant besoin de code javascript pour que la case à cocher soit cochée/décochée lorsque l'utilisateur clique sur les éléments proxy (DIV). Nous devons également modifier l’image d’arrière-plan de Proxy Divs en fonction de l’état actuel de la case à cocher. Nous pouvons appeler une fonction pour attacher des gestionnaires d’événements lorsque le document est chargé:

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

C'est tout ... J'espère que ça aide

10
asim-ishaq

Quelqu'un trébuche-t-il en googlant? Prenez cette approche uniquement en 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);
}



Voir cet exemple:

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>

7
Mo Friedrich

Inspirée par la réponse de @asim-ishaq, voici une solution basée sur jQuery qui prend également en compte le fait que l'utilisateur peut activer/désactiver la case à cocher en cliquant sur l'étiquette du libellé:

<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>
1
ling

Une solution consiste à créer div au lieu de case à cocher et à définir un arrière-plan à votre guise, puis à utiliser js pour rendre le comportement de la div inchangé, ajoutez donc des actions onClick.

1
sylwia

Sachez qu’il s’agit d’un sujet ancien, mais qu’il fallait une solution pour convertir les cases à cocher en images. :) Voici une version de jQuery qui fonctionne très bien pour moi - je voulais partager.

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");
});
0
Lance Larsen - Microsoft MVP