一个icon的选中与不选中

页面的样式展示

1、页面中选中的状态



2、页面中未选中的状态



3、俩个icon代表的状态

页面的布局展示

                                   <label>
										<i class="iconfont icon-danxuan1"></i>
										<input hidden checked type="checkbox" class="checkedC" onclick="Radiochoose(this)"/>
										<span>本人保证所填单据真实有效，并同意</span>
										<span class="actives">《理赔须知》</span><br /><br />
									</label>

想法和构思

icon的选中与未选中可以用俩个不同的icon控制，为了后台好拿到值，放一个隐藏域，给input添加一个方法，判断按钮现有的样式是否是选中的，是选中的就让input的check属性为true

	function Radiochoose(_this){
			var label = $(_this).parent();     //找到input的父级label
			var icon = label.find('.iconfont');   //找到label下面的icon
			if(icon.hasClass('icon-danxuan')){    //判断是否有选中的样式
				icon.removeClass('icon-danxuan').addClass('icon-danxuan1');    //是选中状态的话，就移除选中状态的样式，添加未被选中的
			}else{
				icon.removeClass('icon-danxuan1').addClass('icon-danxuan');   //没有的话，移除现在的样式 ，添加选中状态的样式
			}
		}

或者是给input添加点击事件
 $('#checkR').click(function(){
		 	alert(123);
		 	var label = $(this).parent();
		 	console.log(label);
		 	var icon = label.find('.iconfont');
		 	if(icon.hasClass('icon-danxuan')){
		 		icon.removeClass('icon-danxuan').addClass('icon-danxuan1');
		 	}else{
		 		icon.removeClass('icon-danxuan1').addClass('icon-danxuan');
		 	}
		 });