我想显示绿色选中的图像时复选框被选中，当没有选中空框。我试图把复选框放在div中，并设置div的背景，但它并没有帮助我。任何想法该怎么办？以下是我想要的输出。如何在复选框中显示图像？

2013-05-03 Dhwani

有可以风格的GUI替代品，如http://jqueryui.com/ – 2013-05-03 06:25:39

如果你想风格你的复选框看看这个类似的问题http://stackoverflow.com/questions/4148499/how-to-style-checkbox -using-css – 2013-05-03 06:28:04

像这种很少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') 
});

来源

2013-05-03 06:41:40 Anujith

神奇的例子，很好，很简单。谢谢。 – DnfD 2014-01-22 23:42:41

一种解决方案是让格，而不是复选框，并设置背景，只要你想，然后用js使DIV的行为，因为它是复选框，所以加的onClick行为。

来源

2013-05-03 06:28:42 sylwia

正如其他人所说，你可以使用（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）为DIV和复选框创建HTML。这个想法是，对于每个复选框（输入类型=复选框），我们将有一个div。 div的id后面会加上单词proxy的后缀，以便我们可以识别它。同样对于每个代理div，我们将分配初始类.image复选框。让我们说，我们创建了两个复选框：

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

Originl复选框（与样式属性隐藏[visibility：hidden的]）

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

3）现在我们需要一些JavaScript代码来设置复选框选中/在点击代理元素（DIV）时未选中。此外，我们需要根据复选框的当前状态更改代理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>

这就是所有... 我希望它能帮助

来源

2013-05-03 07:15:45

您的回答太令人印象深刻。谢谢您的帮助。 – Dhwani 2013-05-03 07:25:40

有人绊倒此同时谷歌搜索？就拿这只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>

来源

2015-02-03 17:20:32

惊人的，它很简单，在铬中工作，它是唯一的解决方案 – Sunny 2015-04-25 01:40:23

我推荐这个答案超过了接受的答案，因为它是纯CSS。 – 2016-11-14 23:15:02

这似乎并不适用于Firefox，Edge或IE 11.我错过了什么？ – 2016-11-14 23:38:56

知道这是一个老话题 - 但需要将复选框转换为图像的解决方案。 :)这是一个对我很好的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"); 
});

来源

2015-10-20 21:55:28

通过@阿西 - 伊沙克的回答启发，这里是一个基于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>

来源

2017-08-12 20:52:09 ling

如何在复选框中显示图像？

回答

见这个例子：

相关问题