css:

1. background: url(../images/right.png) no-repeat;
2. border: 1px solid #41b3f9;

1. width: 15px;
2. height: 15px;
3. display: inline-block;
4. border: 1px solid #d2d6da;
5. vertical-align: middle;
6. border-radius: 5px;
7. cursor: pointer;
8. position: relative
   ;
9. bottom: 1px;

html:

<input maxlength="20" type="text" name="username" id="UserAccount" placeholder="使用者名稱/username" class="userNameText"/>

<input name="password" type="password" id="UserPassword" placeholder="密碼/password"/>

<input type="checkbox" value="0" class="check_view_state" 
 
id="checkbox-1" style="display: none;">
<label for="checkbox-1" class="check_label "></label>
<span>記住密碼</span>

//寫cookies
function setCookie(name, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie 
 
= name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
//讀取cookies
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}
//刪除cookies
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

$(function(){

$('#checkbox-1').click(function () {
    if ($("#UserAccount").val() == "") {
        alert("使用者名稱不能為空！");
    }
    if($("#UserPassword").val() == "")
    {
        alert("密碼不能為空！");
    }
    else {
        if ($('.check_label').hasClass("checkActive")) {
            setCookie("uname", $("#UserAccount").val(), 60);
            setCookie("upwd", $("#UserPassword").val(), 60);
        }
        else {
            delCookie("uname");
            delCookie("upwd");
        }
    }
});
if (getCookie("uname") != null)
{
    $('.check_label').addClass("checkActive")
    $('#UserAccount').val(getCookie("uname"));
    $('#UserPassword').val(getCookie("upwd"));
}

})