<style type="text/css">
   body{font:13px/26px "微软雅黑";}
   .typeList{width: 520px;  height:30px;border: 1px solid #dfdfdf;border-width: 1px 0;margin: 50px auto;
       padding-left:10px;overflow: hidden;}
   .typeList ul{height:30px;line-height: 30px;padding-left: 20px;}
   .typeList ul li{float: left;margin-right: 12px;position: relative;}
   .typeList ul li input{display: none;}
   .typeList ul li b{width: 20px;height: 20px;background:url("images/checkbox.gif") no-repeat -12px -18px;
       display: block; position: absolute;top:6px;left: 0;}
   .typeList ul li label{padding-left: 23px;}
   .typeList ul li:hover b{background-position: -12px -118px;}
   .typeList ul .selected b{background-position: -12px -218px;}
</style>
<script type="text/javascript">
   function createTag() {//动态创建b标签
       var li = document.getElementById("checkList").getElementsByTagName("li");
       var label;
       for(var i = 0;i<li.length;i++){
           label = li[i].getElementsByTagName("label");
           var bTag = document.createElement("b");
           li[i].insertBefore(bTag,label[0]);
       }

   }
   window.onload = createTag;
</script>