1. 程式人生 > >radio選中狀態對應文字改變顏色

radio選中狀態對應文字改變顏色

效果:

html:

<input type="radio" class="radio" name="apply" value="" checked="checked" />
<lable class="radio-font" for="apply">本人申請</lable>
<input type="radio" class="radio" name="apply" value="" />
<label class="radio-font" for="apply">代替他人申請</label>
css:
.radio {
	width: 18px;
	height: 18px;
	border: 2px solid #649723;
	margin-top: 20px;
	
}
.radio-font {
	font-size: 18px;
	margin-right: 25px;
	color:#767676;
	margin-top: 20px;
}
js:
$(document).ready(function (){

	$("input[type='radio']").first().next().css('color','#649723');		//設定預設選項的文字為選中狀態
	$(":radio").click(function (){
		$("input[type='radio']").each(function(){
		if(this.checked){
			$(this).next().css('color','#649723');
		}else{
			$(this).next().css('color','#767676');
		}
	});

	});
});