Jquery trigger event for checkbox

Question

I've series of checkbox, for which I've written jquery script on click. When user clicks on checkbox it opens another series of checkbox and it goes on. Now my problem is when users checks few of those checkbox, and moves to next page and for some reason he/she comes back to checkbox page. Then I should have all the boxes which he/she has checked to open up. I've written a check box test when dom loads

$(document).ready(function(){
   if($('.main').is(':checked')){
      $(this).trigger('click'); 
   }else{
      //do  nothing
   }

  $('.main').click(function(){
      if($('.main').is(':checked')){
       var val = $(this).attr('alt');
       $('#'+val).show();
   }else{
       var val = $(this).attr('alt');
       $('#'+val).hide();
   }
  });
});

As you see above. Main is the checkbox class. On click of that, am opening another series of checkbox. Now I want this to done automatically for their checked boxes when they visit the page again

Answer 1

use session or cookie to save .main class checkbox values and checked those accordingly when you come back and then use the following code:

<script type="text/javascript">
$(document).ready(function(){

   $('.main').each(function(){
      if($(this).is(':checked')){
        var val = $(this).attr('alt');
        $('#'+val).show();
      }else{
        var val = $(this).attr('alt');
        $('#'+val).hide();
       }
     });


   if($('.main').is(':checked')){
      $(this).trigger('click'); 
   }else{
      //do  nothing
   }

  $('.main').click(function(){
      if($('.main').is(':checked')){
       var val = $(this).attr('alt');
       $('#'+val).show();
   }else{
       var val = $(this).attr('alt');
       $('#'+val).hide();
   }
  });
});
</script>

Answer 2

I'd just use some JSON and local storage to keep track of what boxes had been checked etc.

$(document).ready(function () {
    if (localStorage.getItem('boxes')) {
        var boxes = JSON.parse(localStorage.getItem('boxes'));
        $.each(boxes, function (idx, val) {
            var box = $('.main').eq(idx);
            box.prop('checked', val);
            $('#' + box.attr('alt')).toggle(val);
        });
    }

    $('.main').on('change', function () {
        var val = $(this).attr('alt'),
            boxes = {};

        $.each($('.main'), function (i, el) {
            boxes[$(el).index('.main')] = el.checked;
        });

        $('#' + val).toggle(this.checked);
        localStorage.setItem('boxes', JSON.stringify(boxes));
    });
});

DEMONSTRATION

Answer 3

Usually it is the browser who decides to "help out" and refill forms that the user has already completed. You shouldn't rely on the browser as the setting can be easily changed and may differ from user to user.

Instead, you might want to think about storing the clicked checkboxes in a cookie/localstorage or perhaps sending each click via AJAX to your server. Then when a user lands on the page, you can check the contents of your cookie or retrieve the clicked elements that were saved via AJAX; You can then recreate clicks on the appropriate elements.

Ckeck out this related post for handling cookie data with jQuery - How do I set/unset cookie with jQuery?