CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
User100696
User100696

Reputation: 707

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

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>

Upvotes: 0

Views: 2767

Answers (2)

nnnnnn
nnnnnn

Reputation: 150040

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.)

Upvotes: 3

Tej Patil
Tej Patil

Reputation: 115

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

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

Upvotes: 0

Related Questions