zoukankan      html  css  js  c++  java
  • 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>
    

      

      

  • 相关阅读:
    P1495 曹冲养猪
    luoguP4281[AHOI2008]紧急集合 / 聚会
    NOIP1997 代数表达式
    luogu P3709大爷的字符串题
    luoguP3912 素数个数
    POJ 1065 Wooden Sticks
    POJ 1063 Flip and Shift
    POJ 1062 昂贵的聘礼
    POJ 1003 Hangover
    POJ 1001 Exponentiation
  • 原文地址:https://www.cnblogs.com/lushixiong/p/6709019.html
Copyright © 2011-2022 走看看