How to Keep checkbox checked after refresh the page

Question

I have a dropdown-box, that when selecting from the drop down its shows the data. Also I have a checkbox above each td, that is used to hide the column this perform by java script,if the user check the checkbox and he select the another value in the drop down box then the selected checkbox will not show.

Below is the code for hiding the column when checkbox selected

I want to test if the user checked the checkbox and he select the another value in the drop-down box then the selected checkbox will not show can any one How can I that?

<input type='checkbox' style='margin:-19px 0 0 732px;   border: 1px solid grey;' name='9xx'/>9xx
<input type='checkbox' style='margin:-19px 0 0 36px;   border: 1px solid grey;' name='6xx'/>6xx  
<input type='checkbox' style='margin:-19px 0 0 30px;   border: 1px solid grey;' name='12xx'/>12xx
<input type='checkbox' style='margin:-19px 0 0 21px;   border: 1px solid grey;' name='14xx'/>14xx
<input type='checkbox' style='margin:-19px 0 0 26px;   border: 1px solid grey;' name='10xx'/>10xx
<input type='checkbox' style='margin:-19px 0 0 31px;  border: 1px solid grey;' name='8xx'/>8xx
<input type='checkbox' style='margin:-19px 0 0 31px;  border: 1px solid grey;' name='11xx'/>11xx

<script>
$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).show();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});

</script>

Put the state of the checkbox in a cookie, and use it to initialize the checkbox when the page loads. — Barmar
– Barmar, Commented Mar 2, 2014 at 8:07
possible duplicate of keep checkboxes checked after page refresh — Barmar
– Barmar, Commented Mar 2, 2014 at 8:07
@Barmar Why on the earth people still want to use cookie for these things. I think we should start using localStorage. — Rahil Wazir
– Rahil Wazir, Commented Mar 2, 2014 at 8:21

Satish Saini · Accepted Answer · 2014-03-02 08:22:58Z

17

Use localStorage for it.

Here is JSFiddle Example of it. Link

Code behind it:

HTML Code:

<input type="checkbox">

JS Code:

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

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));
});

answered Mar 2, 2014 at 8:22

Satish Saini

2,9783 gold badges27 silver badges38 bronze badges

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

2 Comments

Mohit Bhansali Over a year ago

This solution will check all the checkboxes available on that page, even if you select one checkbox.

Satish Saini Over a year ago

YES, I know. But anyone who is familiar with jQuery can edit this code for a single checkbox :) It is not that much difficult.

Collectives™ on Stack Overflow

How to Keep checkbox checked after refresh the page

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related