使用 jquery.cookie 检查的复选框答案

【问题标题】：Checkbox checked with jquery.cookie使用 jquery.cookie 检查的复选框
【发布时间】：2013-09-02 12:19:54
【问题描述】：

我找到了一个很棒的代码，它正是我需要的。但是，仍然需要进行一些更改。

我希望默认选中“Checkbox3”和“Checkbox4”，但是当我取消选中时，例如“Checkbox3”，它将保持未选中状态，直到它的 cookie 被删除，或者直到我检查它再次。 “Checkbox4”也是如此。

感谢您的帮助。

这里是代码http://jsfiddle.net/artmouse/22e8f/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test: jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
    var cookie1 = $.cookie("cookie1");
    var cookie2 = $.cookie("cookie2");
    var cookie3 = $.cookie("cookie3");
    var cookie4 = $.cookie("cookie4");
    !( cookie1 == "changed" ) || $('.Checkbox1').attr('checked',true);
    !( cookie2 == "changed" ) || $('.Checkbox2').attr('checked',true);
    !( cookie3 == "changed" ) || $('.Checkbox3').attr('checked',true);
    !( cookie4 == "changed" ) || $('.Checkbox4').attr('checked',true);
    $('.Checkbox1').change(function () {               
        $('#displaySection1').toggle(!this.checked);
        if( this.checked ) {
            $.cookie("cookie1", "changed");
        } else {
            $.cookie("cookie1", null);
        }         
    }).change();
    $('.Checkbox2').change(function () {
        $('#displaySection2').toggle(!this.checked);
        if( this.checked ) {
            $.cookie("cookie2", "changed");
        } else {
            $.cookie("cookie2", null);
        }         
    }).change(); //ensure visible state matches initially
    $('.Checkbox3').change(function () {
        $('#displaySection3').toggle(!this.checked);
        if( this.checked ) {
            $.cookie("cookie3", "changed");
        } else {
            $.cookie("cookie3", null);
        }         
    }).change(); //ensure visible state matches initially
    $('.Checkbox4').change(function () {
        $('#displaySection4').toggle(!this.checked);
        if( this.checked ) {
            $.cookie("cookie4", "changed");
        } else {
            $.cookie("cookie4", null);
        }         
    }).change(); //ensure visible state matches initially
});  //end function
</script>
<script>
$(function () {
  var cookieD = $.cookie("cookieDates");
  !( cookieD == "changed" ) || $('.always').attr('checked',true); 
  $('.always').change(function () {               
     $('#dates').toggle(!this.checked);
     if( this.checked ) {
         $.cookie("cookieDates", "changed");
     } else {
         $.cookie("cookieDates", null);
     }         
  }).change();
});
</script>
</head>
<body>
    <form id="form1" runat="server">
        <input class="Checkbox1" type="checkbox" />Hide Section 1<br />
        <input class="Checkbox2" type="checkbox" />Hide Section 2<br />
        <input class="Checkbox3" type="checkbox" />Hide Section 3<br />
        <input class="Checkbox4" type="checkbox" />Hide Section 4<br />
        <br />

        <div id="content">
            <div id="displaySection1">
                <strong>Section 1</strong>
                <br />
                Content for section 1 goes here.
                <br /><br />
            </div>
            <div id="displaySection2">
                <strong>Section 2</strong>
                <br />
                Content for section 2 goes here.
                <br /><br />
            </div>
            <div id="displaySection3">
                <strong>Section 3</strong>
                <br />
                Content for section 3 goes here.
                <br /><br />
            </div>
            <div id="displaySection4">
                <strong>Section 4</strong>
                <br />
                Content for section 4 goes here.
                <br /><br />
            </div>
        </div>

    </form>
</body>
</html>

【问题讨论】：

那是什么问题
问题是我不知道如何设置一些复选框默认检查。现在它们都未选中，直到我单击为止。

标签： jquery checkbox jquery-cookie

【解决方案1】：

试试

$(document).ready(function () {

    function section(checkbox, section, cookieName, defaultStatus) {
        var cookie = $.cookie(cookieName);

        var $chk = $(checkbox).prop('checked', cookie == undefined ? defaultStatus : cookie == '1' ? true : false);
        $chk.change(function () {
            $(section).toggle(!this.checked);
            $.cookie(cookieName, this.checked ? 1 : 0);
        }).change();
    }

    section('.Checkbox1', '#displaySection1', 'cookie1', false);
    section('.Checkbox2', '#displaySection2', 'cookie2', true);
    section('.Checkbox3', '#displaySection3', 'cookie3', false);
    section('.Checkbox4', '#displaySection4', 'cookie4', true);

}); //end function

演示：Fiddle

【讨论】：

这正是我想要的！我在 Opera、Firefox、Chrome、Safari 甚至 IE7 中检查过它。到处工作。非常感谢！