Checkbox checked with jquery.cookie

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

  •  27-06-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top