radio選中狀態對應文字改變顏色
阿新 • • 發佈:2019-02-14
效果:
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:
js:.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; }
$(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'); } }); }); });