实现复选框，单选框附加上美图并实行动画思路分析

1.<input type="checkbox" class="style-choose" name="style" id="designStyle" value="simple" />

   <label for="designStyle" class="label-item">

XXXXXX

  </label>

  实现思路：

 (1)在input设置id，然后在label标签设置for属性指向input的id;

 (2)将复选框设置为display:none,input[type="checkbox"]{display:none;}

 (3)在label标签以内实现具体的图片或者内容（用xxxx代替）

 (4)当复选框为checked状态下实现label标签被选中的状态和动画效果；

  例子：（PS，html具体使用angular.js实现遍历添加）

  html代码：

<!--在这里添加内容-->
		<article class="research-table">
			<!--表单-->
			<form>
				<!--表单选项-->
				<ol class="research-items" id="slider">
					<li ng-repeat="item in hobbyData.imgArr track by item.id">
						<label>Q{{item.id}}、{{item.que}}</label>
						<div class="pic-style-choose">
							<span class="dis-in-block child-item" ng-repeat="list in item.items">
								<input type="{{item.checkType}}" class="style-choose" name="{{item.name}}" id="{{list.itemId}}" value="{{list.value}}" ng-model="params.designStyle"/>
								<label for="{{list.itemId}}" class="label-item">
									<a class="item-wrapper dis-in-block" >
										<img class="enlarge-img" ng-src="{{list.imgUrl}}" name="{{list.enlargeImg}}" />
										<span class="mask-layer dis-in-block">
											<i></i>
										</span>
										<span class="dis-in-block btn-enlarge"  on-tap="getPic($event)" data-img="{{list.imgUrl}}">
											<i></i>
										</span>
								   </a>
								</label>
							</span>
						</div>
					</li>
					<li ng-repeat="item in hobbyData.commonArr track by item.id">
						<label>Q{{item.id}}、{{item.que}}</label>
						<div>
							<span class="child-item" ng-repeat="list in item.items">
								<input class="check-box" id="{{list.itemId}}" type="{{item.checkType}}" name="{{item.name}}" value="{{list.value}}" ng-click="getCheckboxItem(item.id,list.itemId,$event)"/>
								<label for="{{list.itemId}}" class="label-item">
									<a class="is-nochecked"></a>
								    <span class="item-name">{{list.des}}</span>
								</label>
							</span>
						</div>
					</li>
				</ol>

			</form>
		</article>

css核心代码：

       .research-table .research-items>li>label{
		display:inline-block;
		margin-bottom:15px;
		font-size:22px;
	}
	.research-table .research-items img{
		display:inline-block;
	}
	.research-table .research-items .label-item{
		display:inline-block;
	}
	.research-table .research-items .child-item{
		display:inline-block;
	}
	.research-table .research-items .child-item~.child-item{
		margin-left:80px;
	}
     .research-table .research-items li:first-child .child-item~.child-item{
     	margin-left:47px;
     }
     .research-table .research-items li:not(:nth-child(1))>div{
     	padding-left:20px;
     }
	.research-table .research-items .item-wrapper{
		position:relative;
		width:435px;
		height: 243px;
		
	}
	.research-table .research-items .mask-layer{
		position:absolute;
		left:0;
		top:0;
		z-index:2;
		width:100%;
		height:100%;
		text-align:center;
		background-color:rgba(1,1,1,0.4);
		line-height:243px;
		opacity:0;
		transition:opacity .2s ease-in;
		-webkit-transition:opacity .2s ease-in;
	}
	.research-table .research-items .mask-layer>i{
		position:relative;
		display:inline-block;
		vertical-align:middle;
		width:80px;
		height:80px;
		border-radius:50%;
		border:5px solid #1BAD6C;

	}
	.research-table .research-items .mask-layer>i:before,
	.research-table .research-items .mask-layer>i:after{
		-moz-box-sizing: border-box;
  		-webkit-box-sizing: border-box;
 		box-sizing: border-box;
		position:absolute;
		content: ' ';
		height:0;
		width:8px;
		background-color:#1BAD6C;
		-webkit-transform-origin: left top;
		transform-origin: left top;
		border-radius: 5px;

	}
	.research-table .research-items .mask-layer>i:before{
       top: 57px;
       left: 32px;
	   background-color:#1BAD6C;
	   -webkit-transform: rotate(-135deg);
	   transform: rotate(-135deg);
	}
	.research-table .research-items .mask-layer>i:after{
		top: 37px;
  		left:10px;
  		background-color:#1BAD6C;
  		-webkit-transform: rotate(-45deg);
  		transform: rotate(-45deg);
	}
	/*点击添加active*/
	.research-table .research-items .style-choose:checked + .label-item .item-wrapper .mask-layer{
		opacity:1;
	}
	.research-table .research-items .style-choose:checked + .label-item .item-wrapper .mask-layer>i:before{
		 height: 40px;
        -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
        animation: dothatopcheck 0.4s ease 0s forwards;
	} 
	.research-table .research-items .style-choose:checked + .label-item .item-wrapper .mask-layer>i:after{
		 height: 30px;
         -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
         animation: dothabottomcheck 0.2s ease 0s forwards;      
	}
	.research-table .research-items .btn-enlarge{
		position:absolute;
		right:0;
		bottom:0;
		z-index:10;
		width:40px;
		height:30px;
		text-align:center;
		background-color:rgba(1,1,1,0.7);
	}
	.research-table .research-items .btn-enlarge i{
		display:inline-block;
		width:30px;
		height:30px;
		background:url(../img/client-love/btn-bigger.png) no-repeat center center; 
	}
	.research-table .research-items .is-nochecked{
		display:inline-block;
		width:30px;
		height:30px;
		border:1px solid #C0C0C0;
	}
	.research-table .research-items	.item-name{
		display: inline-block;
        vertical-align: top;
        margin:4px 10px;
		color:#C0C0C0;
		font-size:18px;
	}
     .research-table .research-items .check-box:checked + .label-item .is-nochecked{
     	background:url(../img/client-love/item-checked.jpg) no-repeat center center;
     	background-size:cover;
     	border:none;
     }
    .btn-submit{
		position:fixed;
		right:20px;
		bottom:120px;
		z-index:10;
		width:100px;
		height:100px;
		border-radius:50%;
		border:none;
		background-color:#EF7800;
		font-size:24px;
		color:#fff;
	}
	/*处理一下横屏图片的宽度*/
	@media all and (orientation : portrait) {
	   .research-table .research-items .item-wrapper{
	   	  width:307px;
	   	  height:172px;
	   }
	   .research-table .research-items .pic-style-choose img{
		  width:100%;
		  height:auto;
	   }
	   	.research-table .research-items .mask-layer{
	   		line-height:172px;
	   	}
	}
	
/*勾选的动画*/
/* Checkmark style starts */
	@-webkit-keyframes dothabottomcheck {
	  0% {
	    height: 0;
	  }
	
	  100% {
	    height: 30px;
	  }
	}
	@keyframes dothabottomcheck {
	  0% {
	    height: 0;
	  }
	
	  100% {
	    height: 30px;
	  }
	}
	
	@keyframes dothatopcheck {
	  0% {
	    height: 0;
	  }
	
	  50% {
	    height: 0;
	  }
	
	  100% {
	    height: 40px;
	  }
	}
	@-webkit-keyframes dothatopcheck {
	  0% {
	    height: 0;
	  }
	
	  50% {
	    height: 0;
	  }
	
	  100% {
	    height: 40px;
	  }
	}

  

  具体实现效果：

 

 参考：http://www.softwhy.com/mytest/code/1653/