如何在使用 jquery 刷新页面后保持复选框在模式中的选中状态？

Posted 2023-05-08

【中文标题】如何在使用 jquery 刷新页面后保持复选框在模式中的选中状态？

【英文标题】：How to keep checkbox checked in modals after page refresh using jquery?

【发布时间】：2021-05-25 11:20:40

【问题描述】：

这是我的模式，其中包括一些带有全选选项的复选框，请告诉我如何在我仅使用 jquery 而不是 localstorage 刷新页面后保持复选框处于选中状态：

<!--Modal-->
    <div class="modal fade" id="invoiceOptions" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body text-justify">
            <form class="form">
              <div class="form-group">
                  <div class="input-group checkbox">
                    <label>
                      <input  type="checkbox" name="select-all" id="checkAll"/>
                      Select All
                    </label>
                    <br>
                      <label>
                        <input type="checkbox" class="invoiceOption"/>
                        Item 1
                      </label>
                      <label>
                        <input type="checkbox" class="invoiceOption"/>
                        Item 2
                      </label>
                     <label>
                        <input type="checkbox" class="invoiceOption"/>
                        Item 3
                      </label>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="saveBtn" value="" data-dismiss="modal">
                  save
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--/Modal-->

这是我的模态的 jquery 脚本：

      <script>
      $('#checkAll').click(function(event) 
     if(this.checked) 
     $('.invoiceOption').each(function() 
      this.checked = true;
    
    );
     else 
    $('.invoiceOption').each(function() 
      this.checked = false;
  
    );
   
 );
</script>

【参考方案1】：

首先，您必须在 jquery 文档加载功能中包含您的 jquery 脚本，以确保脚本在页面完全准备好后运行。

$(document).ready(
    $('#checkAll').click(function(event) 
    if(this.checked) 
        $('.invoiceOption').each(function() 
            this.checked = true;
        );
      else 
        $('.invoiceOption').each(function() 
            this.checked = false;
        );
     
 );
);

那么。 页面刷新后，它会向服务器发送请求（如果没有缓存任何东西）并创建 dom，然后运行 ​​Javascript。

所以刷新后js中的一切都会消失

注意：使用 F5 刷新时，使用某些浏览器（如 firefox）， 浏览器本身，在刷新之间保存输入标签值。

dadash，要保留复选框状态，您必须将它们保存在其他地方，然后在页面重新加载时检查它，如果有任何数据。

包括这些（不排除）的技术：

使用本地系统：

本地数据库 cookies

使用网址数据：

保留在网址中（如提到的@Pof）

使用服务器：

在服务器中创建一个 api 并尝试保存和检索给定用户的检查输入。 （您可以在服务器中为给定用户使用会话）

【参考方案2】：

您需要一些东西来存储输入的当前状态。所以如果你不想使用 localStorage，你可以在 url 中使用 params 来存储输入值。

您可以使用 window.history.replaceState() javascript 函数，该函数允许您更改历史条目的当前值（它会更改您当前的 url 而无需重新加载页面）。

然后在页面重新加载时，您可以使用这些 url 参数来检查/取消选中您在表单中需要的内容。