如何保持複選框，在第1頁選中時，點擊從第2頁回到第一頁，並清空後刷新頁面選中按鈕

Question

首先，我要保持我的複選框，在第1頁籤，當我回到第1頁第2頁然後，當我刷新頁面時，我想讓所有選中的複選框都未被選中。

我已經完成了第一部分，這是保持複選框選中。但在刷新頁面後，我無法清除選中的複選框。有什麼建議麼？

在這裏，我提供我的第1頁的HTML和jQuery代碼：

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

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

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

 
<div class="col-button form-footer"> 
 
\t \t \t <button id="btnCancel" type="button" name="action" > 
 
\t \t \t \t Cancel 
 
\t \t \t </button> 
 
\t \t \t <button id="btnNext" type="button" name="action"> 
 
\t \t \t \t Next 
 
\t \t \t </button> 
 
\t \t \t </div>

Answer 1

大家好，我的朋友。

試試這個在您的btnCancel功能：

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

下面是示例代碼：

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

Answer 2

我不知道如果你錯過了粘貼一些代碼，但你的第一個腳本行（.on('click' ...）無效。

將其更改爲

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

，它應該工作

Here是根據的jsfiddle