jQ -- 整合radio选中样式改变并拥js控制选中

最新推荐文章于 2022-01-17 13:59:03 发布

初来乍到到

最新推荐文章于 2022-01-17 13:59:03 发布

阅读量434

点赞数

分类专栏： jQ 文章标签： css javascript

本文链接：https://blog.csdn.net/weixin_43868692/article/details/106273674

版权

jQ 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

//css样式
input[type="radio"]+label::before {
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 50%;
    text-indent: .15em;
    border: 1px solid #CCCCCC;
}

input[type="radio"]:checked+label::before {
    background-color: #E73820;
    background-clip: content-box;
    padding: 2px;
    width: 8px;
    height: 8px;
}

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.radio-inline {
    padding-left: 0;
}

input[type=radio][disabled]:checked+label::before {
    background-color: #CCCCCC;
    background-clip: content-box;
    padding: 2px;

}

//js 控制选中 
 var pay1 = $('input[name="sex"]:checked').val();  //获得被选中的值

 if(pay1 == 1){
     $("input[type='radio']").eq(1).prop("checked",true);
     $("input[type='radio']").eq(0).prop("checked",false);
  }else if(pay1 == 2){
     $("input[type='radio']").eq(0).prop("checked",true);
     $("input[type='radio']").eq(1).prop("checked",false);
 }

//eq() 方法返回带有被选元素的指定索引号的元素。   prop() 方法设置或返回被选元素的属性和值。