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

【问题标题】：How to keep checkbox checked in modals after page refresh using jquery?如何在使用 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>

【问题讨论】：

标签： javascript html jquery css checkbox

【解决方案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 参数来检查/取消选中您在表单中需要的内容。

【讨论】：