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
possible duplicate of keep checkboxes checked after page refresh — Barmar
@Barmar Why on the earth people still want to use cookie for these things. I think we should start using localStorage. — Rahil Wazir

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

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'));
});

How to Keep checkbox checked after refresh the page

1 Answers