讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > php教程 > PHP源码 > 正文

Html中使用自定义图片来实现checkbox显示的方法_HTML/Xhtml_网页制作

PHP中文网
发布： 2016-05-25 17:10:25
原创
1527人浏览过

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

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


JavaScript Code复制内容到剪贴板

  2.         Html中使用自定义图片来实现checkbox显示的方法_HTML/Xhtml_网页制作class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">   

    立即学习“前端免费学习笔记（深入）”；

  3.            

  4.      "checkbox"  style="display:none" id="agree" checked="checked">   

  5.      <script> </script>

  6.          function checkclick(){   

  7.             var checkimg = document.getElementById("checkimg");   

  8.             if($("#agree").is(':checked') ){   

  9.                 $("#agree").attr("checked","unchecked");   

    MagicArena
    MagicArena

    字节跳动推出的视觉大模型对战平台

    MagicArena 163
    查看详情 MagicArena

  10.                 checkimg.src="../img/unchecked.png";   

  11.                 checkimg.alt="未选";   

  12.             } else{   

  13.                 $("#agree").attr("checked","checked");   

  14.                 checkimg.src="../img/checked.png";   

  15.                 checkimg.alt="选中";   

  16.             }   

  17.         }   

  18.       

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

相关标签：
html
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：php异步处理类 下一篇：创建业务流的时候用得着
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
phpmystudy2016版程序包下载-让天下没有难配的php环境 对学习PHP的新手来说，WINDOWS下环境配置是一件很困难的事；对老手来说也是一件烦琐的事。因此无论你是新手还是老手，该phpmystudy2016程序包都是一个不错的选择。
2017-01-06 16:08:31
6363
多城市选择器实现代码 多城市选择器实现代码，需求 : 热门城市、列表中的城市都需要在数据库中查询出来后构建列表，并按a-z排列，输入字母可以实现查询。
2016-12-28 13:40:59
5223
微信接口php版本sdk的WxApi.class.php 微信最新公布接口 php版本的sdk，包括分组、获取用户信息、获取关注列表、创建带参数的二维码等等。
2016-11-25 14:05:54
3558
php图片加水印类，支持文字水印、透明度设置、自定义水印类 * 图片加水印类，支持文字水印、透明度设置、自定义水印位置等。 * 使用示例： * $obj = new WaterMask($imgFileName); //实例化对象 * $obj->$waterType = 1; //类型：0为文字水印、1为图片水印
2016-11-23 14:49:44
3379
php命名空间和动态语言特征 PHP 命名空间的实现受到其语言自身的动态特征的影响。因此，如果要将下面的代码转换到命名空间中：
2016-11-23 10:55:37
3154
PHP弱类型安全问题总结 PHP弱类型安全问题总结
2016-11-12 11:01:54
2960
如何读懂并写出装逼的函数式代码 如何读懂并写出装逼的函数式代码
2016-11-12 10:17:18
3743
用 PHP 爬虫做旅游数据分析 用 PHP 爬虫做旅游数据分析
2016-11-11 15:15:55
4742
C++从文件中按照单词读取内容 C++从文件中按照单词读取内容
2016-11-11 13:38:00
2133
你所不知道的 PHP - 自动加载 你所不知道的 PHP - 自动加载
2016-11-11 11:18:34
2078
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部