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(/jscss/demoimg/201402/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="/jscss/demoimg/201402/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="/jscss/demoimg/201402/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>

 

转载于:https://www.cnblogs.com/youtianxia/p/3813193.html

你可能感兴趣的:(javascript,前端)