充值金额点击变幻可手动切换（html,css,js）

1. 首先布局
   html:默认选中第一个
   
   
   
   充值金额：
   

   
   10RMB
   20RMB
   30RMB
   50RMB
   100RMB
   200RMB
   300RMB
   500RMB
   1000RMB
   

   
   
   
   　
   

   
   
   RMB = 990游戏币 = 9900欢乐豆
   

   
   
   
   
   css:

    html{margin:0;padding:0;font-size:14px;}
    .form1{width:710px;margin:0 auto;padding:60px 40px 200px;border:1px solid #ccc;}
    .form1 label{margin-top:26px;display:block;font-weight:400;}
    .form1 div{width:500px;float:right;margin-right:56px;}
    .form1 span{width:140px;height:35px;display:inline-block;text-align:right;line-height:35px;color:#333;font-size:14px;}
    /* 设置相对定位 */
    .form1 label .a-num{width:98px;height:36px;line-height:36px;border:1px solid #ececec;border-radius:4px;display:inline-block;font-size:14px;color:#333;text-align:center;margin-right:20px;margin-bottom:10px;position:relative;cursor:pointer;}
    /* 设置绝对定位 选隐藏 */
    .form1 label .a-num .select-img{position:absolute;bottom:0;right:0;display:none;}
    /* 选中后加蓝色边框 显示小图片 */
    .form1 label .active{border:1px solid #229fe7;}
    .form1 label .active .select-img{display:block;}
    .num_rmb{margin-right:0;width:120px;height:36px;line-height:36px;border:1px solid #ececec;border-radius:4px;display:inline-block;font-size:14px;color:#333;padding:0 12px;}

jq 执行点击事件跟改变事件

<script src="js/jquery.min.js">script>
<script>
    // 点击a-num事件
    $(".a-num").click(function(){
        $(this).addClass("active").siblings().removeClass("active");   // 点击后选中添加active除其他兄弟元素的active
        RMB = $(this).attr("RMB");                                     // 获取到金额
        // console.log(RMB);
        $(".num_rmb").val(RMB);
        $(".num_rmb").parent().children("e").text($(".num_rmb").val()*99) // 将值填入type2下面的(e)中
        $(".num_rmb").parent().children("f").text($(".num_rmb").val()*990)    // 将值填入type2下面的(f)中
    })
    // 改变事件
    $(".num_rmb").change(function(){
        if($(this).val()<10){                                              // 判断里面的值是否大于10，小于10让他大于10
            $(".num_rmb").val(10);
        }a-num
        $(".a-num").removeClass("active");                                 // 移除a-num的选中事件
        $(this).parent().children("e").text($(this).val()*99)               // 将值填入type2下面的(e)中
        $(this).parent().children("f").text($(this).val()*990)              // 将值填入type2下面的(f)中
       })
    script>

最终效果如上：