This is my modal that includes some checkboxes with an option to select all, please let me know how to keep the boxes checked after I refresh the page only using jquery not 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-->

This is the jquery script for my modal:

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

This is my modal that includes some checkboxes with an option to select all, please let me know how to keep the boxes checked after I refresh the page only using jquery not 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-->

This is the jquery script for my modal:

      <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

Share Improve this question Follow asked Feb 23, 2021 at 7:35 Sayed Sajjad HaidariSayed Sajjad Haidari 1111 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

first of all you have to include your jquery script in jquery document load function in order to insure script runs after page pletely ready.

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

then. after a page refresh, it sends request to server (if it hasnt been cached anything) and create dom, then run Javascript.

so everything in js would be vanished after refresh

Note : with some browser (like firefox) when refreshing using F5, The Browser itself, save input tag values between refreshes.

dadash, to preserve checkbox state, you have to save them elsewhere, then check it when page reloads, if there is any data.

the techniques including these (not excluding):

1. use local system:

   • localDB
   • cookies

2. use url data:

   • preserve in url (like @Pof mentioned)

3. use server:

   • make an api in server and try to save and retrieve checked input for a given user. (you can use sessions for a given user in server)

You need something to store current state of your inputs. So if you don't want to use localStorage, you could use params in url to store input values.

You could use the window.history.replaceState() javascript function, that allows you to change the current value of the history entry (it will change your current url without reloading the page).

Then on page reload, you could use those url params to ckeck/uncheck what you need in your form.