Html中使用自定义图片来实现checkbox显示的方法

来源：爱站网时间：2020-03-27编辑：网友分享

使用图片可以实现复选框，而实现原理是将复选框的显示替换为标签标签，将复选框的显示设置为无，本文是爱站技术频道为大家整理的Html中使用自定义图片来实现checkbox显示的方法。

JavaScript Code复制内容到剪贴板

<label for="agree" >
<img class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">
</label>
<input type="checkbox" style="display:none" id="agree" checked="checked">
<script>
function checkclick(){
var checkimg = 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显示的方法，我们要在实践中不断的提高自己能力，才能让我们在实践中更加游刃有余。