input:radio改变选中颜色 · 从零开始的避坑指南

~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <style type="text/css"> .clear{clear: both;} .pay_wx{position: relative;} .pay_wx input[type=radio]{opacity:0;} .pay_wx .for_wx{position: absolute;top: 17%;left: 18%;} .pay_wx .for_wx div{width: 20px;height: 20px;background: #FD88A3;border: 1px solid #FD88A3;border-radius: 50%;overflow: hidden;} .pay_ali{position: relative;} .pay_ali input[type=radio]{opacity:0;} .pay_ali .for_ali{position: absolute;top: 17%;left: 18%;} .pay_ali .for_ali div{width: 20px;height: 20px;border: 1px solid #FD88A3;border-radius: 50%;overflow: hidden;} </style> </head> <body> <p class="pay_title">支付方式</p> <div class="payment"> <ul> <li> <div class="pay_name"> <span>微信支付</span> </div> <div class="pay_radio pay_wx"> <input type="radio" name="pay" id="wx" value="wx" onclick="getValue(this)"> <label for="wx" class="for_wx"><div id="wx_label"></div></label> </div> <div class="clear"></div> </li> <li> <div class="pay_name"> <span>微信支付</span> </div> <div class="pay_radio pay_ali"> <input type="radio" name="pay" value="ali" id="ali" onclick="getValue(this)"> <label for="ali" class="for_ali"><div id="ali_label"></div></label> </div> <div class="clear"></div> </li> </ul> </div> </body> </html> <script type="text/javascript"> //input:radio选择特效 function getValue(obj){ var val = obj.value; if(val == "wx"){ document.getElementById("ali_label").style.backgroundColor="#F2F4F3"; document.getElementById("wx_label").style.backgroundColor="#FD88A3"; }else{ document.getElementById("ali_label").style.backgroundColor="#FD88A3"; document.getElementById("wx_label").style.backgroundColor="#F2F4F3"; } } </script> ~~~