Question

I’m making a simple jQuery script that will allow you to change something on the click of a button. My problem is that if I change the value (checked), and then click the submit button, it will recognize it as the default. If you do this on the default, it is set to off, so if you check it off (turn on) and then click the submit button, it will be the default (off) command. I know this because I use local storage to save the settings. So if You check it off, refresh, and then click submit, it will do the proper action.

Here’s my jQuery:

$(document).ready(function(){ 
var test='false'

if (localStorage.getItem('simpSet')){
element = document.getElementById('simplify');
var test=localStorage.getItem('simpSet');

if(test == 'true'){
element.setAttribute('checked');
}

console.log(test);
}

$('#simplify').live('click', function(){

if ($('#simplify').is(':checked')){
var test='true'
console.log(test);

}else{
var test='false'
console.log(test);
}
localStorage.setItem('simpSet', test);

});

$('#button').live('click', function(){
console.log(test);

if(test == 'true'){
console.log('isTrue');
$('#test').css('background', 'blue');
return false;
}else{
$('#test').fadeOut('slow');
return false;
}

});

});

and my simple markup

<span id='simcont'>Simplify<input type='checkbox' id='simplify'></span>

<input type="submit" val='Go' id='button'>
<div id='test'>Testing simplifier</div>

Any ideas what’s wrong?

Example: http://kod.singaming.net/simplify/

By default the text will fade away, if you check it, it SHOULD turn the text’s background blue. This doesn’t work right however so it will just fade, but if you check it off, refresh and then submit it will turn the background blue.

Answer 1

I would change

var test = 'true';

to

test = 'true';

in your checkbox event area. The variable isn’t accessible outside of the click event function.

edit: The same thing goes for unchecking. Remove the ‘var’