trigger page reload on specific checkbox selection

Question

Ok, I have a code which saves 30 or so checkbox selections to local storage which works fine, I also have a separate checkbox (as below) which when checked automatically reloads the page

<input type="checkbox" id="autoload" class="autoload"> Tick this box to automatically update the results as you choose them from the options below

Below is the code I have to trigger the page reload

if ($('#autoload').is(':checked')) {
    location.reload(); 
    }

Below is the code which saves the checkboxes to local storage and where I want to add the trigger reload code above

window.onload = function() {
   function onClickBox() {
      var arr = $('.box').map(function() {
         return this.checked;
      }).get();
      localStorage.setItem("checked", JSON.stringify(arr));
   }
   $(document).ready(function() {
      var arr = JSON.parse(localStorage.getItem('checked')) || [];
      arr.forEach(function(checked, i) {
         $('.box').eq(i).prop('checked', checked);
      });
      $(".box").click(onClickBox);
   });
}

My problem is I do not know where or how to place the trigger page reload code into the code above to make it work. Hope all my babblings make sense, any help really appreciated.

https://stackoverflow.com/questions/14544104/checkbox-check-event-listener check this link I think this might work. — Abhishek Mane, Mar 07 '20 at 06:13
What is the realtion between `.box` checkboxes and `#autoload` checkbox? — Zuckerberg, Mar 07 '20 at 06:16
.box are the classes to all the checkboxes, #autoload is the id for the checkbox which triggers the page reload — Jase, Mar 07 '20 at 06:18

score 0 · Answer 1 · edited Mar 07 '20 at 10:03

0

You can use ".change" trigger for check box like this:

window.onload = function() {
   function onClickBox() {
      var arr = $('.box').map(function() {
         return this.checked;
      }).get();
      localStorage.setItem("checked", JSON.stringify(arr));
   }
   $(document).ready(function() {
      var arr = JSON.parse(localStorage.getItem('checked')) || [];
      arr.forEach(function(checked, i) {
         $('.box').eq(i).prop('checked', checked);
      });
      $(".box").click(onClickBox);
   });
}

$('#autoload').change(() => {
   if ($('#autoload').is(':checked')) {
      location.reload();
   }
});

edited Mar 07 '20 at 10:03

Zuckerberg

1,781
2
10
19

answered Mar 07 '20 at 06:22

Mahdi Ahmadi

441
4
12

I have tried what you suggested, but unfortunately, it does not seem to work :( – Jase Mar 07 '20 at 06:25
Anybody got any other thoughts on how I can sort it please? – Jase Mar 07 '20 at 06:57

score 0 · Answer 2 · edited Mar 07 '20 at 10:03

Sorted it myself

window.onload = function() {
   function onClickBox() {
      var arr = $('.box').map(function() {
         return this.checked;
      }).get();
      localStorage.setItem("checked", JSON.stringify(arr));
      if ($('#autoload').is(':checked')) {
         location.reload()
      };
   }
   $(document).ready(function() {
      var arr = JSON.parse(localStorage.getItem('checked')) || [];
      arr.forEach(function(checked, i) {
         $('.box').eq(i).prop('checked', checked);
      });
      $(".box").click(onClickBox);
   });
}

trigger page reload on specific checkbox selection

2 Answers2