下面小编就为大家带来一篇 html 中使用自定义图片来实现 checkbox 显示的方法小编觉得挺不错的, 现在就分享给大家, 也给大家做个参考一起跟随小编过来看看吧
如果需要使用图片来实现 checkbox 的使用, 可以使用来实现, 实现原理是将 label 表签代替 checkbox 的显示, 将 checkbox 的 display 设置为 none, 在 label 标签中使用要显示的图片 img, 再使用 js 函数去控制图片的选中与否的切换
JavaScript Code 复制内容到剪贴板
for="agree">
class="checkbox" alt="选中" lazyload="../img/checked.png" id="checkimg" onclick="checkclick();">
- "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
来源: https://www.php1.cn/detail/php-fb41630174.html