jquery模拟checkbox效果,以及background-size在jquery中的使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>金击子智能终端-交易室</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"src="js/fontsize.js"></script>
    <script type="text/javascript" src="js/touch.js"></script>
    <link href="css/jys.css" rel="stylesheet"></head>
<body>
    <div class="wrapper">
        <div class="header">交易室</div>
        <div class="notice">
            <div class="left">声明</div>
            <div class="right">
                我们贯彻中立的角色,不倾向于任何金融产品,从客户的利益出发。我们从环球金融市场中挑选优秀的理财产品,构建最适合客户的投资组合方案。我们致力成为亚洲区内其中一间最具规模的独立理财顾问公司。
            </div>
        </div>
        <div class="checkbox">
            <div class="vip1">
                <div class="c-header">
                    <img src="images/header2.png" class="header-img">普通会员</div>
                <div class="content">
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>交易圈</span>
                        <input type="checkbox" ></div>
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>YY同步</span>
                        <input type="checkbox" ></div>
                </div>
                <div class="content">
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>牛牛挂单</span>
                        <input type="checkbox" ></div>
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>掌上分析师</span>
                        <input type="checkbox" ></div>
                </div>
            </div>
        </div>
        <div class="checkbox">
            <div class="vip1">
                <div class="c-header c-header2">
                    <img src="images/header.png" class="header-img">VIP会员</div>
                <div class="content">
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>早/晚内参</span>
                        <input type="checkbox" disabled="disabled" ></div>
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>金点股</span>
                        <input type="checkbox"  disabled="disabled"></div>
                </div>
                <div class="content">
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>蝴蝶指标</span>
                        <input type="checkbox"  disabled="disabled"></div>
                    <div class="name">
                        <img src="images/icon8.png">
                        <span>财迷广播</span>
                        <input type="checkbox"  disabled="disabled"></div>
                </div>
                <div class="content">
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>大事件</span>
                        <input type="checkbox" disabled="disabled" ></div>
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>神算子</span>
                        <input type="checkbox"  disabled="disabled"></div>
                </div>
                <div class="content">
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>盈利种子</span>
                        <input type="checkbox"  disabled="disabled" ></div>
                    <div class="name">
                        <img src="images/icon1.png">
                        <span>邮币卡</span>
                        <input type="checkbox"  disabled="disabled" ></div>
                </div>
            </div>
        </div>
        <div class="r-more">
            <a href="">确定选择</a>
        </div>

    </div>
</body>
</html>
<script type="text/javascript">
    function more(){
        alert(1);
        this.innerHTML='1';
    }

    $(function () {
        $(".wrapper .record .r-main .r-more a").attr('ontouchstart', 'hover(this)');  
        $(".wrapper .record .r-main .r-more a").attr('ontouchend', 'mouseout(this)');
    })
    $('input:checkbox').each(function(){
        var _disable = $(this).attr("disabled");
        if(_disable == 'disabled'){
            $(this).css({'background':'url(images/disable.png) 0px 0px /  0.8rem 0.8rem'})
        }
       $(this).click(function(){
        var _check = $(this).is(':checked')
            if(_check == true){
                $(this).addClass('checked')

            }else if(_check == false){
                $(this).removeClass('checked')
            }
       })
        
    })
</script>

jquery

<script type="text/javascript">
    function more(){
        alert(1);
        this.innerHTML='1';
    }

    $(function () {
        $(".wrapper .record .r-main .r-more a").attr('ontouchstart', 'hover(this)');  
        $(".wrapper .record .r-main .r-more a").attr('ontouchend', 'mouseout(this)');
    })
    $('input:checkbox').each(function(){
        var _disable = $(this).attr("disabled");
        if(_disable == 'disabled'){
            $(this).css({'background':'url(images/disable.png) 0px 0px /  0.8rem 0.8rem'})
        }
       $(this).click(function(){
        var _check = $(this).is(':checked')
            if(_check == true){
                $(this).addClass('checked')

            }else if(_check == false){
                $(this).removeClass('checked')
            }
       })
        
    })
</script>

  

转载于:https://www.cnblogs.com/bestsamcn/p/4943315.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值