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 QueryString解析类代码
Jan 17 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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
杏林同学录(三)
2006/10/09 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
不安全的常用的js写法
2009/09/15 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python使用剪切板的方法
2017/06/06 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python实现实时视频流播放代码实例
2020/01/11 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
客户表扬信范文
2014/01/10 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书