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 相关文章推荐
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
javascript解析json数据的3种方式
May 08 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
js实现自定义右键菜单
May 18 Javascript
JavaScript文档对象模型DOM
Nov 20 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递归函数返回值使用方法
2013/02/18 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Python查找相似单词的方法
2015/03/05 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python selenium如何设置等待时间
2016/09/15 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python装饰器实例大详解
2017/10/25 Python
scrapy爬虫完整实例
2018/01/25 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
审计工作个人的自我评价
2013/12/25 职场文书
初中科学教学反思
2014/01/21 职场文书
学校大课间活动方案
2014/01/30 职场文书
犯错检讨书
2014/02/21 职场文书
物控部经理职务说明书
2014/02/25 职场文书
迎新晚会策划方案
2014/06/13 职场文书
参赛口号
2014/06/16 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL