手机
当前位置:查字典教程网 >网页设计 >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中实现文本框出现提示功能的多种方法

html常用的几个重定向连接示例代码

html中DTD使用小结

将html文本中所有的标签替换掉的方法

html的footer置于页面最底部的简单实现方法

html css 控制div或者table等固定在指定位置的实现方法

html设置虚线边框的方法

用DIV遮罩解决鼠标直接勾选checkbox无效的问题

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

使用语义化标签去写你的HTML 兼容IE6,7,8

精品推荐
分类导航