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

下面小编就为大家带来一篇html中使用自定义图片来实现checkbox显示的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

JavaScript Code复制内容到剪贴板

  1.                     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="选中"; } }

登录后复制

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

更多Html中使用自定义图片来实现checkbox显示的方法相关文章请关注PHP中文网!

立即学习“前端免费学习笔记(深入)”;

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    浅谈Html网页表格结构化标记的应用

    2025-3-9 6:19:38

    编程技术

    HTML页面中复选框的操作方法

    2025-3-9 6:19:54

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索