JS实现表单中检验盒对勾选中增加边框显示效果

本文实例讲述了射流研究…实现表单中检验盒对勾选中增加边框显示效果。分享给大家供大家参考。具体如下：

这里用Java脚本语言实现检验盒复选框选中效果，表单中的复选框效果，打对勾选中效果模拟，JS与HTML5相结合实现的美化效果。貌似目前比较流行的效果啦！

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-table-checkbox-check-border-show-codes/

具体代码如下：

！doctype html html lang=' en-US ' hearteta http-equiv=' Content-Type ' Content=' text/html；chaRset=gb2312' /titleJS实现单个图片选中美化框/titlestyle type='text/css'body，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，code，form，fieldset，legend，input，button，textarea，blockquote，th，td，p { margin:0padding:0 }输入、按钮、选择、文本区域{轮廓：无} Li {列表样式：无} img {垂直对齐：顶部；边框：无}文本区域{调整大小：无}正文{宽度：自动；高度：自动划水：0;边距：0颜色： # 666背景： # FFF；}正文，输入，文本区域{ font-size :12 pxfont-family:Arial，Verdana，' Microsoft Yahei '，Simsun } a {光标：指针} a :链接{ color : # 37a文字装饰：无} a :访问过{ color : # 669text-装饰： none } a :悬停{ color : # fff文本装饰：无；背景： # 37a } a :活动{ color : # fff文本装饰：无；背景：#f93} .在{内容： }之后清除{清除：两者}。清除修复程序：显示：块；font-size : 0；高度：0;clear : both visibility : hidden } .清除fix { zoom :1 } # radio _ wrap { width : 916 px；余量： 50px自动0;font-size : 0；*字间距：-1px；} @媒体屏幕和(-web kit-min-device-pixel-ratio :0){ # radio _ wrap {字母间距：-4px；}}#radio_wrap输入{ display : none } # radio _ wrap Li {位置：相对；宽度： 223像素；高度： 259像素；border: 1px固体# CCCdisplay :内嵌块；* display : inline * zoom :1 margin 33600 2px } # radio _ wrap Li。选中{边框：2 px纯红；边距：-1px 1px；}#radio_wrap li。已检查i { width:30px高度：30 px位置：绝对；右：0底部：0;_ right :-1px；_ bottom :-1px；背景： URL(图片/勾选。gif)不重复；}/style/head dydiv id=' radio _ wrap ' ul Li class=' c checked '输入类型=' radio ' id=' radio _ a _ 01 ' name=' radio _ a '/标签为=' radio _ a _ 01 ' img src=' http : images/陶宝2。jpg ' alt=' disabled '/标签I/I/Li class=' c '输入类型=' radio ' id=' radio _ a _ 02 ' name=' radio _ a '/label for=' radio _ a ' for(var I=0；长度；i ){ li[i].onclick=function(){ for(var I=0；长度；i ){ li[i].class name=} this . class name=' checked } } }))；/script div style=' text-align : center；清除： ' br/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。