Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>if you don't want the checkbox to be checked by default use</p> <pre><code>&lt;input type="checkbox" name="foo" id="foo" /&gt; </code></pre> <p>instead of</p> <pre><code>&lt;input type="checkbox" checked="checked" name="foo" id="foo" /&gt; </code></pre> <p>If you want to check the status of the checkbox when the page first loads, add this bit of JavaScript.</p> <pre><code>$(document).ready(function(){ if ($("#foo").is(':checked')){ $('#checked-b').css("width","60%"); $('#checked-a').css("width","38%"); } else { $('#checked-b').css("width","100%"); $('#checked-a').css("width","0%").hide(); } }); </code></pre> <p>If you want the user's browser to remember if the status of the "foo" checkbox each time the user visits your site, you likely will need to read up on cookies. <a href="http://www.w3schools.com/js/js_cookies.asp" rel="nofollow">Here's a guide for JS Cookies at w3schools</a></p> <hr> <p><strong>Edit</strong></p> <p>I'll make no claims that this works because I haven't tried it, nor have I ever used cookies myself (but I did re-discover that Google has the answers to basically everything. It's really quite easy when you give it half an effort)</p> <pre><code>$(document).ready(function(){ if (get_cookie( "fooIsChecked" ) == 1){ $('#foo').prop("checked", true); $('#checked-b').css("width","60%"); $('#checked-a').css("width","38%"); } else { $('#foo').prop("checked", false); $('#checked-b').css("width","100%"); $('#checked-a').css("width","0%").hide(); } $("#foo").on("click",function() { if ($(this).is(':checked')){ set_cookie( "fooIsChecked", "1", 30 ); $('#checked-a').show('fast',function() { $('#checked-b').css("width","60%"); $('#checked-a').css("width","38%"); }) ; } else { set_cookie( "fooIsChecked", "0", 30 ); $('#checked-a').show('fast',function(){ $('#checked-b').css("width","100%").show(); $('#checked-a').css("width","0%").hide(); }); } }); }); function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ){ var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ; document.cookie = cookie_name + "=" + encodeURIComponent( cookie_value ) + "; max-age=" + 60 * 60 * 24 * lifespan_in_days + "; path=/" + domain_string; } function get_cookie ( cookie_name ){ var cookie_string = document.cookie; if (cookie_string.length != 0) { var cookie_value = cookie_string.match ( '(^|;)[\s]*' + cookie_name + '=([^;]*)' ); return decodeURIComponent ( cookie_value[2] ) ; } return '' ; } </code></pre> <p>Code modified from <a href="http://www.thesitewizard.com/javascripts/cookies.shtml" rel="nofollow">The Site Wizard</a> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload