码迷,mamicode.com
首页 > Web开发 > 详细

jQuery判断是否选中

时间:2018-04-17 18:01:14      阅读:580      评论:0      收藏:0      [点我收藏+]

标签:alt   ack   效果   span   orm   device   turn   soft   auto   

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>

效果图:

技术分享图片

 

jQuery判断是否选中

标签:alt   ack   效果   span   orm   device   turn   soft   auto   

原文地址:https://www.cnblogs.com/huanghuali/p/8868076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!