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


Posted in Javascript onAugust 21, 2015

本文实例讲述了JS实现表单中checkbox对勾选中增加边框显示效果。分享给大家供大家参考。具体如下:

这里用JavaScript实现checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果。貌似目前比较流行的效果啦!

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" />
<title>JS实现单个图片选中美化框</title>
<style 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:0; padding:0 }
input, button, select, textarea { outline:none }
li { list-style:none }
img { vertical-align:top; border:none }
textarea { resize:none }
body { width:auto; height:auto; padding:0; margin:0; color: #666; background: #FFF; }
body, input, textarea { font-size:12px; font-family:Arial, Verdana, "Microsoft Yahei", Simsun }
a{cursor:pointer}
a:link{color:#37a;text-decoration:none}
a:visited{color:#669;text-decoration:none}
a:hover{color:#fff;text-decoration:none;background:#37a}
a:active{color:#fff;text-decoration:none;background:#f93}
.clear { clear:both }
.clearfix:after{ content:"."; display:block; font-size: 0; height:0; clear:both; visibility:hidden }
.clearfix{ zoom:1}
#radio_wrap{width: 916px; margin: 50px auto 0;font-size: 0;*word-spacing:-1px;}
@media screen and (-webkit-min-device-pixel-ratio:0){
#radio_wrap{letter-spacing:-4px;}}
#radio_wrap input{display: none;}
#radio_wrap li{position:relative; width: 223px; height: 259px; border: 1px solid #CCC; display:inline-block; *display:inline; *zoom:1; margin:0 2px;}
#radio_wrap li.checked{border:2px solid red;margin:-1px 1px;}
#radio_wrap li.checked i{width:30px; height:30px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(images/checked.gif) no-repeat;}
</style>
</head>
<body>
<div id="radio_wrap">
 <ul>
 <li class="c checked">
  <input type="radio" id="radio_a_01" name="radio_a" />
  <label for="radio_a_01"><img src="images/taobao2.jpg" alt="" disabled/></label>
  <i></i>
 </li>
 <li class="c">
  <input type="radio" id="radio_a_02" name="radio_a" />
  <label for="radio_a_02"><img src="images/taobao2.jpg" alt="" disabled/></label>
  <i></i>
 </li>
 </ul>
</div>
<script type="text/javascript">
(function() {
 var radioWrap = document.getElementById("radio_wrap"),
 li = radioWrap.getElementsByTagName("li");
 for(var i = 0; i < li.length; i++){
 li[i].onclick = function() {
  for(var i = 0; i < li.length; i++){
  li[i].className = "";
  }
  this.className = "checked";
 }
 }
})();
</script>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
浅谈javascript 归并方法
Jan 21 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 #Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 #Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 #Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 #Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 #Javascript
jquery结婚电子请柬特效源码分享
Aug 21 #Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
You might like
PHP与Perl之间知识点区别整理
2019/03/19 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
详谈js模块化规范
2017/07/07 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
python抽象基类用法实例分析
2015/06/04 Python
Python删除n行后的其他行方法
2019/01/28 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python  logging日志打印过程解析
2019/10/22 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
入党自我鉴定
2014/03/25 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
老公婚前保证书
2015/02/28 职场文书
学生会任命书范本
2015/09/21 职场文书
导游词之扬州大明寺
2019/10/09 职场文书