jQ -- 整合radio選中樣式改變並擁js控制選中

//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() 方法設置或返回被選元素的屬性和值。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章