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

前端技术 2023/09/01 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-table-checkbox-check-border-show-codes/

具体代码如下：

<!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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/2650

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案