手机
当前位置:查字典教程网 >网页设计 >XHTML >Html中使用自定义图片来实现checkbox显示的方法
Html中使用自定义图片来实现checkbox显示的方法
摘要:如果需要使用图片来实现checkbox的使用,可以使用来实现,实现原理是将label表签代替checkbox的显示,将checkbox的di...

如果需要使用图片来实现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显示的方法全部内容了,希望大家多多支持查字典教程网~

【Html中使用自定义图片来实现checkbox显示的方法】相关文章:

html禁止清除input文本输入缓存的两种方法

html 文本框(text)不可用只读的多种实现方法

html中用href 实现点击链接弹出文件下载对话框

使用iframe在网页中嵌入其他网页的方法

向HTML中插入视频并兼容所有浏览器的方法

html实现文字绕排示例(html图文混排)

定义input type=file 样式的方法

在html中添加script脚本的2种方法和注意事项

HTML元素设置焦点的方法

table设置背景图片,不能100%显示解决方法

精品推荐
分类导航