1. 程式人生 > >jQuery-在網站上註冊新賬號時,“同意並接受”效果的實現

jQuery-在網站上註冊新賬號時,“同意並接受”效果的實現

大家都知道,當我們在一個新的網站或者應用上註冊賬號時,必須先要同意它們的規章制度,才可以進行下一步操作,下面我們就分別用DOM物件和jQuery物件來簡單實現以下。

效果描述:當滑鼠點選文字前面的複選框時,會有一個alert警告框彈出,當點選警告框的缺點按鈕之後,複選框會呈現選中的狀態。

圖一:點選複選框時


圖二:點選確定按鈕之後


具體程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同意並接受註冊協議</title>
    <script src="../libs/jquery.js"></script>
</head>
<body>
<input type="checkbox" id="cr">
<label>我已經閱讀了上面制度</label>
<script>
    //用DOM方式來判斷複選框是否被選中
    /*$(document).ready(function () {     //等待dom元素載入完畢
        var $cr = $("#cr");     //jquery物件
        var cr  = $cr[0];       //dom物件,或者$cr.get(0)
        $cr.click(function () {
            if(cr.checked){
                alert("感謝支援,可以繼續操作了");
            }
        })


    })*/

    //使用jQuery中的方法來判斷選項是否被選中
    $(document).ready(function () {     //等待dom元素載入完畢
        var $cr = $("#cr");
        $cr.click(function () {
            if($cr.is(":checked")){     //jQuery方式判斷
                alert("感謝支援,現在可以繼續操作啦");
            }
        })
    })
</script>
</body>
</html>