从第2页退回到第1页时如何选中第1页中的复选框，并在刷新页面后清除选中的按钮

Question

Firstly, I want to keep my checkbox in page 1 checked when I back to page 1 From page 2. Then, I want to make all checked checkbox to be unchecked when I refresh the page.

I have done the first part, which is keep the checkbox checked. But I cannot clear the checked checkbox after I refresh page. Any suggestions?

Here I provide my HTML and jQuery code of page 1:

 .on('click', '#btnCancel', function() { $('#indexContent').show(); $('#mainContent').empty(); $.each(radioValues, function(key, value) { $("#" + key).prop('checked', false); }); $.each(checkboxValues, function(key, value) { $("#" + key).prop('checked', false); }); }) var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, $checkboxes = $("#myTable :checkbox"); $checkboxes.on("change", function(){ $checkboxes.each(function(){ checkboxValues[this.id] = this.checked; }); localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues)); }); // On page load $.each(checkboxValues, function(key, value) { $("#" + key).prop('checked', value); }); var radioValues = JSON.parse(localStorage.getItem('radioValues')) || {}, $radios = $("#myTable :radio"); $radios.on("change", function(){ $radios.each(function(){ radioValues[this.id] = this.checked; }); localStorage.setItem("radioValues", JSON.stringify(radioValues)); }); // On page load $.each(radioValues, function(key, value) { $("#" + key).prop('checked', value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="striped" id="myTable"> <thead> <tr> <th>Primary</th> <th>Tag / Untag</th> <th>Accounts</th> </tr> </thead> <tbody> <tr> <td><input class="with-gap" name="group1" type="radio" id="tes1" value="1" /> <label for="tes1"></label></td> <td><input type="checkbox" class="filled-in" id="filled-in-box1" value="1" /> <label for="filled-in-box1"></label></td> <td><span class="account" id="acc1">123456789</span></td> </tr> <tr> <td><input class="with-gap" name="group1" type="radio" id="tes2" value="2" /> <label for="tes2"></label></td> <td><input type="checkbox" class="filled-in" id="filled-in-box2" value="2" /> <label for="filled-in-box2"></label></td> <td><span class="account" id="acc2">147852369</span></td> </tr> </tbody> </table> <div class="col-button form-footer"> <button id="btnCancel" type="button" name="action" > Cancel </button> <button id="btnNext" type="button" name="action"> Next </button> </div> 

Answer 1

Hi my friend.

Try this in your btnCancel function:

$("#btnCancel").click(function(){
    $('#indexContent').show();
    $('#mainContent').empty();
      $('input[type=checkbox]').prop('checked',false);
      $('input[type=radio]').prop('checked',false);
});

Here is the example code:

https://jsfiddle.net/sosymhuj/1/

Answer 2

I am not sure if you missed pasting some code but your first script line ( .on('click' ... ) is not valid.

Change it to

$('#btnCancel').on('click', function() {
            $('#indexContent').show();
            $('#mainContent').empty();
            $.each(radioValues, function(key, value) {
                $("#" + key).prop('checked', false);
            });
            $.each(checkboxValues, function(key, value) {
                $("#" + key).prop('checked', false);
            });
        })  

and it should work

Here is the according JSFiddle