How to keep checkbox checked and content shown when reload page?

Question

I have this html content:

<div class="myClass" style="display:none">
<table class="table table-hover">
.....
</table>
</div>

As you can see this is a table which is hidden

I have a checkbox to show this if the checkbox is checked

<label class="switch">
    <input type="checkbox" id="test" onclick="toggle('.myClass', this)" autocomplete="on" ></legend>
    <div class="slider round"></div>
</label>

<script language="JavaScript">
function toggle(className, obj) {
    var $input = $(obj);
    if ($input.prop('checked')) $(className).show(1000);
    else $(className).hide(1000);
}
</script>

As you can see if checkbox is checked it will be shown and if it's unchecked it will hide my div

everything works great.

Now if I reload this page I want to keep the checked checkbox if it was checked or if it was unchecked I got it this way:

<script>
$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('input').prop('checked', test || false);
});

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
            if ($(this).prop('checked')) {
            $(className).show(1000); //checked
        }
    console.log($(this).is(':checked'));
});
</script>

Now my problem is

when I reload the page if the checkbox is checked it's not showing the content.... so I have to uncheck it and check it again to make it work.

Is there a possible way to reload the page and keep my content shown if the checkbox is checked?

EDIT

thanks to @nnnnnn as answered before I got this working :

<label class="switch">
    <input type="checkbox" id="test" ></legend>
    <div class="slider round"></div>
</label>

<div class="myClass" style="display:none">
<table class="table table-hover">
...
</table>

<script>
$(function(){        
    $('#test')
      .prop('checked', localStorage.input === 'true')
      .on('click', function() {
         localStorage.input = this.checked;
         if (this.checked) {
           $('.myClass').show(1000); //checked
         } else {
           $('.myClass').hide(1000);
         }
      })
      .trigger('change');
});
</script>

nnnnnn · Accepted Answer · 2017-04-06 04:45:41Z

3

Programmatically setting an element's checked property does not trigger any click or change handlers attached to the element. So after the line where you set that, you need to explicitly trigger the change handler yourself by calling .trigger('change'), or just .change().

You can consolidate your code by selecting $('#test') once and then chaining the required methods after it:

<script>
$(function(){        
    $('#test')
      .prop('checked', localStorage.input === 'true')
      .on('change', function() {
         localStorage.input = this.checked;
         if (this.checked) {
           $('.myClass').show(1000); //checked
         } else {
           $('.myClass').hide(1000);
         }
      })
      .trigger('change');
});
</script>

You shouldn't need the toggle() function or the inline onclick handler in addition to binding the event handler through jQuery.

Note that I've further simplified things. var test = localStorage.input === 'true'? true: false; can be simplified to var test = localStorage.input === 'true';, because the === operator returns a boolean, and on the next line the || false can be removed because at that point you know that test is a boolean. And beyond that, you don't really need the test variable at all given that you only use it once after it is set.

Also, you were a bit inconsistent with how you test the checked state, using $(this).is(':checked') in one place and $(this).prop('checked') on the next line. Both work, but given that this is a reference to the DOM element, you can simply say this.checked to test the property directly without jQuery. (The only time .is(':checked') makes sense is when called on a jQuery object that contains multiple elements, and you want to see if at least one of them is checked.)

edited Apr 6, 2017 at 4:45

answered Apr 6, 2017 at 3:42

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

User100696 Over a year ago

Hey! thank you very much for your answer, after trying your code if I have it checked I reload page and it changes to unchecked, if I reload page again it changes to checked and shown the content as I expected but what I really need is if I have it checked I and page needs to be reloaded it has to be checked and show my content. I just edited my question where I added your code!

nnnnnn Over a year ago

Oh, sorry, that's because the .trigger('click') changes the checked status the same as if a user clicked the box. That wouldn't have happened if using the 'change' event, sorry. I'll update my answer to just use 'change' - I think probably my recommendation for using 'click' instead is outdated now anyway (it only really applied for older IE when "clicking" the box via the keyboard, so...).

nnnnnn Over a year ago

So that worked? By the way, there's no need to edit questions to add code from answers, especially if you don't include an explanation that there is still a problem with the code just added, so if my edit fixed the issue it might be best to remove that from your question again.

User100696 Over a year ago

Yeah that worked, oh sorry for that, I was just to let you know the changes I've made but that's absolutely working as expected :)

Tej Patil · Accepted Answer · 2017-04-06 04:04:33Z

0

Trying adding code line $('input').change(); as

 $(function(){
        var test = localStorage.input === 'true'? true: false;
        $('input').prop('checked', test || false);
         $('input').change();
    });

answered Apr 6, 2017 at 4:04

Tej Patil

1151 silver badge11 bronze badges

Collectives™ on Stack Overflow

How to keep checkbox checked and content shown when reload page?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related