radio 自定义样式切换

简单代码

<style>
                                                .payclass{
                                                    115px;height:37px;background-color:#e1e1e1;border:solid 1px #c7c4c4;padding:7px 0 0 10px;cursor:pointer;float:left; margin-right:20px;
                                                }
                                                .payclass2 {                                                   
                                                    border: solid 1px #D00A15;
                                                    
                                                    background: url('../../Content/img/tips_05.png') no-repeat right bottom;
                                                  
                                                }
                                            </style>
                                            <div class="payclass payclass2">
                                                <div style="background:url(../../Content/img/tips.png) -25px -72px;25px;height:25px; float:left;"> </div> 微信扫码
                                                <input type="radio" name="pay" id="pay1" style="display:none;" checked="checked" />
                                            </div>                                               
                                            
                                           
                                            <div class="payclass"><div style="background:url(../../Content/img/tips.png) -25px -102px;25px;height:25px; float:left;"> </div> 支付宝扫码
                                                <input type="radio" name="pay" id="pay2" style="display:none;" />
                                            </div>
                                            
                                           
                                            <script>
                                                $(".payclass").click(function () {                                                   
                                                    //alert($(this).val());
                                                    if (!$(this).hasClass("payclass2")) {
                                                        $(".payclass").removeClass("payclass2");
                                                        $(this).find("input[type=radio]").attr("checked", 'checked');
                                                        $(this).addClass("payclass2");
                                                    }                                                                                                  
                                                });
                                                //$(".payclass li").click(function () {
                                                //    if (!$(this).attr('disabled')) {
                                                //        if (!!$(this).hasClass("selected")) {
                                                //            $(this).removeClass("selected");
                                                //        } else {
                                                //            $(this).addClass("selected").siblings("li");
                                                //        }
                                                //    }
                                                //});
                                            </script>

  

  

原文地址:https://www.cnblogs.com/lushixiong/p/6709019.html