• jQuery判断是否选中


    1.判断check是否选中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断check是否被选中</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <style type="text/css">
            *{margin:0; padding: 0}
            body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;background-color: #fff;color:#333;max-width: 640px;margin: 0 auto;}
            a{ text-decoration: none; color: #333 }
            /*btn*/
            .public_btn_s {padding: 10px 0; margin: 0 10px;}
            .public_btn_s a { display: block; height: 34px; line-height: 34px; text-align: center; font-size: 18px; background-color: #31b6e7; color: #fff; border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
        </style>
    </head>
    <body>
        <div class="public_agreement">
            <input type="checkbox" id="agreeInput" value="on">同意<a href="javascript:;" >个人隐私协议</a>
        </div>
        <div class="public_btn_s">
            <a href="javascript:;" class="J_ajax_submit_btn">点击查看</a>
        </div>
    
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                //按钮点击
                $('.J_ajax_submit_btn').on('click',function(){
                    if($('#agreeInput').length){
                        if(!($('#agreeInput').is(':checked'))){
                            alert('您未同意个人隐私协议');
                            return false;
                        }else{
                            var url = 'http://www.baidu.com';
                            window.location.href=url;
                        }
                    }
                });
            })
        </script>
    
        
    </body>
    </html>

    2.判断div是否被选中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断div是否被选中</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <style type="text/css">
            *{margin:0; padding: 0}
            body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;background-color: #fff;color:#333;max-width: 640px;margin: 0 auto;}
            a{ text-decoration: none; color: #333 }
            /*选项卡*/
            .form_tab{ overflow: hidden; background-color: #fffdf0; margin:5px 10px; border:1px solid #f9a268; border-radius: 5px;}
            .ft_top{ overflow: hidden; height: 37px;line-height: 36px;}
            .ft_top a{float: left; width: 50%; box-sizing: border-box; border-right:1px solid #f9a268; text-align: center; background-color: #ffedda; border-bottom:1px solid #f9a268;}
            .ft_top a:last-child{ border-right:0}
            .ft_top a:hover,.ft_top a.current{ background-color: #fffdf0; border-top:2px solid #db2121; color: #db2121;}
            .ft_top a.current{ border-bottom:0}
            .ft_con{overflow: hidden;padding:20px 10px ;}
            .ft_con a{ height: 25px; line-height: 25px; padding:0 10px; border:1px solid #f9a268; background-color: #ffddbb;float:left; margin:0 5px; border-radius: 3px;}
            .ft_con a.current{ color: #db2121; border-color: #db2121;}
    
            /*btn*/
            .public_btn_s {padding: 10px 0; margin: 0 10px;}
            .public_btn_s a { display: block; height: 34px; line-height: 34px; text-align: center; font-size: 18px; background-color: #31b6e7; color: #fff; border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
    
        </style>
    </head>
    <body>
        <div class="form_tab">
            <div class=" ft_top" id="tabMenu">
                <a href="javascript:;" class="current">转盘法(排盘法)</a>
                <a href="javascript:;">飞盘法(排盘法)</a>
            </div>
            <div class="ft_con "id="tabCon">
                <a href="javascript:;">置润法</a>
                <a href="javascript:;">拆补法</a>
                <a href="javascript:;">茅山道人法</a>
            </div>
        </div>
        <div class="public_btn_s">
            <a href="javascript:;" class="J_ajax_submit_btn">点击查看</a>
        </div>
    
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#tabMenu a").on('click',function () {
                    $(this).addClass('current').siblings().removeClass('current');
                });
                $('#tabCon a').on('click',function () {
                    $(this).addClass('current').siblings().removeClass('current');
                });
                //按钮点击
                $('.J_ajax_submit_btn').on('click',function(){
                    if($('#tabCon a').length){
                        if(!($('#tabCon a').is('.current'))){
                            alert('您未选择排盘方法');
                            return false;
                        }else{
                            var url = 'http://www.baidu.com';
                            window.location.href=url;
                        }
                    }
                });
            })
        </script>
    
        
    </body>
    </html>

    效果图:

  • 相关阅读:
    《构建之法》阅读笔记07
    学习进度条——第六周
    《构建之法》阅读笔记06
    团队开发
    《构建之法》阅读笔记05
    数组3——返回二维数组中最大联通子数组的和
    学习进度条——第五周
    坯布检验管控系统
    DateTime日期格式转换,不受系统格式的影响
    多层下firebird自增长字段的处理
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8868076.html
Copyright © 2020-2023  润新知