参见此示例：

Question

我想在选中复选框时显示绿色选中的图像，并且在未选中时显示空框。我试图在div中设置复选框并设置div的背景，但它并没有帮助我。知道该怎么办？以下是我想要的输出。

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

Answer 2

正如其他人所说，您可以使用代理元素（div）并在单击div时更改已选中/取消选中的复选框状态。以下是您需要的工作示例:(我使用了简单的javascript，以便读者可以快速理解）

分步指南：

1）首先创建两个用于检查状态的css类和一个用于未检查状态的css类：

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

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

2）为DIV和Checkbox创建HTML。我们的想法是，对于每个复选框（输入类型=复选框），我们将有一个div。 div的id将以单词proxy为后缀，以便我们识别它。此外，对于每个代理div，我们将分配初始类.image-checkbox。假设我们创建了两个复选框：

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

Originl Checkboxes（使用样式属性隐藏它[visibility：hidden]）

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

3）现在，我们需要一些javascript代码来设置复选框，以便在单击代理元素（DIV）时选中/取消选中。我们还需要根据复选框的当前状态更改Proxy 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>

多数人...... 我希望它有所帮助

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

Answer 4

一种解决方案是创建div而不是复选框并根据需要设置背景，然后使用js来设置div的行为，因为它是复选框，因此添加onClick操作。

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

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

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

Answer 8

Javascript：

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("image");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

HTML：

<p>Display Image when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="image" style="display:none"><img src="https://noticetoday.in/wp-content/uploads/2021/07/Untitled-5-420x200.jpg"></p>

希望这个例子能帮到你。

如何显示图像代替复选框？

8 个答案:

参见此示例：