如果需要使用图片来实现checkbox的使用，可以使用来实现，实现原理是将label表签代替checkbox的显示，将checkbox的display设置为none,在label标签中使用要显示的图片img，再使用js函数去控制图片的选中与否的切换。

JavaScript Code复制内容到剪贴板 <labelfor="agree"> <imgclass="checkbox"alt="选中"src="../img/checked.png"id="checkimg"onclick="checkclick();"> </label> <inputtype="checkbox"style="display:none"id="agree"checked="checked"> <script> functioncheckclick(){ varcheckimg=document.getElementById("checkimg"); if($("#agree").is(':checked')){ $("#agree").attr("checked","unchecked"); checkimg.src="../img/unchecked.png"; checkimg.alt="未选"; }else{ $("#agree").attr("checked","checked"); checkimg.src="../img/checked.png"; checkimg.alt="选中"; } } </script>

以上就是小编为大家带来的Html中使用自定义图片来实现checkbox显示的方法全部内容了，希望大家多多支持查字典教程网~