单选去除按钮,点击选中文字,修改文字颜色

最新推荐文章于 2023-08-04 16:31:14 发布

Sorry晚安

最新推荐文章于 2023-08-04 16:31:14 发布

阅读量607

点赞数 1

文章标签： radio 单选点击文字变色文字变色点击文字变色

本文链接：https://blog.youkuaiyun.com/qq_44524654/article/details/103252080

版权

页面单选radio点击选中文字改变其颜色

第一次写博客,请多多关照

二话不说上代码:
html:

<tr>
<td><p class="radio-font">性别</p></td>
<td>
    <input type="radio" class="radio" name="sex" value="" id="sex1"/>
    <label for="sex1" class="radio-font">男</label>
    <input type="radio" class="radio" name="sex" value="" id="sex2"/>
    <label class="radio-font" for="sex2">女</label>
</td>
</tr>

css:

.radio {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid #FF0000;
    vertical-align:middle;
    margin-top:-2px;
    margin-bottom:1px;
}
.radio-font {
    line-height: 25px;
    padding: 25px;
    font-family: "PingFang SC", serif;
    font-size: 18px;
    margin-right: 25px;
    color:#444444;
    margin-top: 20px;
    vertical-align: -2px
}

js:

$(document).ready(function (){
    $(":radio").click(function (){
        $("input[type='carType']").each(function(){
            if(this.checked === true){
                $(this).next().css('color','#FF0000');
            }else{
                $(this).next().css('color','#444444');
            }
        });
    });
});

效果图:

在下也是个小白,写这个:
一是为了记录,以后想不起来可以回来找,
二是给各位跟我一样的小白一个参考.
上面这些是仿照下边链接进行修改的,希望对各位有用:
链接: https://blog.youkuaiyun.com/sinat_23668639/article/details/50132657