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

程序员文章站 2022-04-05 15:17:48
...
<!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>