radio单选框选中状态下让对应选中的文字改变颜色

<!DOCTYPE html>
<html lang="en">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<style type="text/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;
		}
	</style>
	<body>
		<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>
	</body>

	<script>
		$(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');
				}
			});
		 
			});
		});
	</script>
</html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/305.html