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 {...
<!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>
- 发表于 2020-06-27 23:51
- 阅读 ( 618 )
- 分类：web前端开发
