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