radio选中状态对应文字改变颜色

最新推荐文章于 2025-06-20 23:44:18 发布

原创

最新推荐文章于 2025-06-20 23:44:18 发布 · 8.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #html #jquery

本文介绍如何通过CSS样式和jQuery JavaScript库实现单选按钮（radio）被选中时，与其相关联的文字颜色变化效果。通过监听radio的change事件，可以动态更新文字的CSS属性，达到视觉反馈的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

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']").ea