一个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');

		 	}

		 });