![checkbox 实时操作，勾选后变色[带演示]](http://www.corange.cn//uploadfiles/1013-3_99535.jpg "checkbox 实时操作，勾选后变色[带演示]")
演示地址:http://www.corange.cn/demo/3695/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
body{
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
}
#content{
background-color:#fff;
width:750px;
padding:40px;
margin:0 auto;
border-left:15px solid #008FCF;
border-right:1px solid #ddd;
-moz-box-shadow:0px 0px 16px #aaa;
}
.head{
font-family:Helvetica,Arial,Verdana;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
font-style:normal;
letter-spacing:3px;
color:#888;
border-bottom:3px solid #f0f0f0;
padding-bottom:10px;
margin-bottom:10px;
}
.head a{
color:#008FCF;
text-decoration:none;
float:right;
text-shadow:1px 1px 1px #888;
}
.head a:hover{
color:#f0f0f0;
}
#content h1{
font-family:"Trebuchet MS",sans-serif;
color:#008FCF;
font-weight:normal;
font-style:normal;
font-size:56px;
text-shadow:1px 1px 1px #aaa;
}
#content h2{
font-family:"Trebuchet MS",sans-serif;
font-size:30px;
font-style:normal;
background-color:#f0f0f0;
margin:40px 0px 30px -40px;
padding:0px 40px;
clear:both;
float:left;
width:100%;
color:#aaa;
text-shadow:1px 1px 1px #fff;
}
</style>
<body>
<div >http://www.corange.cn/archives/2010/10/3695.html