Checkbox checked with jquery.cookie

StackOverflow https://stackoverflow.com/questions/18565147

  •  27-06-2022
  •  | 
  •  

문제

I found a wonderful code, that does exactly what i need. But, a little change is still required.

I want "Checkbox3" and "Checkbox4" to be checked by default, but when I'll uncheck, for example "Checkbox3", it'll stay unchecked, untill its cookie is deleted, or until I'll check it again. Same goes to "Checkbox4".

Thanks for your help.

Here is the code 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>
도움이 되었습니까?

해결책

Try

$(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

Demo: Fiddle

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top