判断checkbox的状态后实现跳转或者显示提示弹框

最新推荐文章于 2022-12-26 15:01:25 发布

-多巴胺-

最新推荐文章于 2022-12-26 15:01:25 发布

阅读量1.6k

点赞数

分类专栏：代码文章标签： checkbox

本文链接：https://blog.csdn.net/weixin_43012505/article/details/88897066

版权

代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
    .pop {
        width: 500px;
        height: 70px;
        border: 1px solid #999;
        background-color: #666;
        position: fixed;
        right: 25%;
        top: 20%;
        display: none;   
    }
    .pop h3 {
        display: inline-block;
        width: 100%;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 14px;
    }
    </style>
</head>
<body>
    <div class="boxFixed">
        <div>
            <input class="checkSty" type="checkbox"  />
            <span>我已阅读并同意网站/手机预约途径规则</span>
        </div>
        <div>
            <a href="https://www.baidu.com/" onclick = "return enter();">预约挂号</a>
            <a href="https://www.baidu.com/" onclick = "return enter();">今日挂号</a>
        </div>
    </div>

    <div class="pop">
    <h3>请阅读并同意挂号须知！</h3>
    </div>

    <script>
    //复选框选中后跳转
        var enter =function(){
            //$("#checkbox1").is(":checked") 
            var checkSty = $(".checkSty").is(":checked");
            //判断checkbox是否被选中
            if (checkSty==false){
                //r如果没有被选中，则显示弹窗
                $(".pop").show();
                //弹窗1秒后用2秒淡出
                setTimeout(function(){
                     $(".pop").fadeOut(2000);
                },1000);
                return false;
                }
                else {
                    return true;
                }
            }
    </script>
</body>
</html>

-多巴胺-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
判断checkbox的状态后实现跳转或者显示提示弹框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://code.jquery.com/jquery-2.1.4.min.js">&l...
复制链接

扫一扫

专栏目录