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

旧城等待， 2021-09-18 15:46 194阅读 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>