Checkbox checked with jquery.cookie

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

  •  27-06-2022
  •  | 
  •  

Pregunta

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>
¿Fue útil?

Solución

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top