it-swarm.com.de

Wie wird ein Bild anstelle eines Kontrollkästchens angezeigt?

Ich möchte ein grün markiertes Bild anzeigen, wenn das Kontrollkästchen aktiviert ist und wenn das Kontrollkästchen nicht leer ist. Ich habe versucht, das Kontrollkästchen in div zu setzen und den Hintergrund von div festzulegen, aber das hilft mir nicht weiter. Irgendeine Idee, was zu tun ist? Unten ist die Ausgabe, die ich möchte.

Image

10
Dhwani

So mit wenig jQuery und 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

Wie bereits erwähnt, können Sie ein Proxy-Element (div) verwenden und das Kontrollkästchen für das Kontrollkästchen aktivieren bzw. deaktivieren, wenn auf das div geklickt wird. Folgendes ist das Arbeitsbeispiel für genau das, was Sie benötigen: (ich habe einfaches Javascript verwendet, damit die Leser es schnell verstehen können)

Schritt für Schritt Anleitung:

1) Zuerst erstellen Sie zwei CSS-Klassen, eine für den geprüften Zustand und eine für den nicht geprüften Zustand:

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

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

2) Erstellen Sie den HTML-Code für DIVs und Kontrollkästchen. Die Idee ist, dass für jedes Kontrollkästchen (Eingabetyp = Kontrollkästchen) ein div vorhanden ist. Die ID des Div wird durch den Word-Proxy mit einem Suffix versehen, damit wir ihn identifizieren können. Auch für jedes Proxy-Div werden wir die anfängliche Klasse .image-checkbox zuweisen. Angenommen, wir erstellen zwei Kontrollkästchen:

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

Originl Checkboxes (verstecken sie mit der Stileigenschaft [Sichtbarkeit: ausgeblendet])

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

3) Jetzt benötigen wir Javascript-Code, um das Kontrollkästchen auf aktiviert/deaktiviert zu setzen, wenn auf die Proxy-Elemente (DIVs) geklickt wird. Außerdem müssen wir das Hintergrundbild von Proxy-Divs entsprechend dem aktuellen Status des Kontrollkästchens ändern. Wir können eine Funktion aufrufen, um Event-Handler anzuhängen, wenn das Dokument geladen wird:

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

Das ist alles ... Ich hoffe es hilft

10
asim-ishaq

Jemand, der beim Googeln darüber gestolpert ist? Berücksichtigen Sie diesen nur für CSS bestimmten Ansatz:

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);
}



Siehe dieses Beispiel:

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

Inspiriert von der Antwort von @ asim-ishaq, hier eine auf Jquery basierende Lösung, die auch die Tatsache berücksichtigt, dass der Benutzer das Kontrollkästchen durch Klicken auf das Label-Tag umschalten kann:

<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

Eine Lösung besteht darin, div anstelle eines Kontrollkästchens festzulegen und einen Hintergrund festzulegen, wie Sie möchten, und dann js zu verwenden, um das Verhalten des div so zu verändern, wie es war, also fügen Sie die onClick-Aktionen hinzu.

1
sylwia

Hier ist ein weiteres Beispiel. Funktioniert gut mit 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>
1
abdullah

Wissen Sie, dass dies ein älterer Thread ist - aber eine Lösung zum Konvertieren von Kontrollkästchen in Bilder erforderlich war. :) Hier ist eine jQuery-Version, die für mich gut funktioniert - ich wollte sie teilen.

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");
});