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

saifur · Accepted Answer · 2013-04-29T07:05:38.423

2

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>

edited Apr 29 '13 at 07:05

answered Apr 29 '13 at 06:26

saifur

627
4
17

I can still pull off the values. My problem is I want those subclass elements (which opens up when the checkbox is checked) should open up automatically when the user visits the page again – Saravanan Sampathkumar Apr 29 '13 at 06:43
edited my code try again. Is the .main checkbok showing right status ? How did you manage that ? – saifur Apr 29 '13 at 06:53
Dint work! Instead it s checking all checkboxes when I refresh the page. I don know wy? – Saravanan Sampathkumar Apr 29 '13 at 07:02

adeneo · Answer 2 · 2013-04-29T06:53:53.120

1

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

edited Apr 29 '13 at 06:53

answered Apr 29 '13 at 06:33

adeneo

293,187
26
361
361

I can still pull off the values. My problem is I want those subclass elements (which opens up when the checkbox is checked) should open up automatically when the user visits the page again – Saravanan Sampathkumar Apr 29 '13 at 06:42
And with this code it will, for all eternity even! For just the session use sessionStorage. – adeneo Apr 29 '13 at 06:44

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

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?

edited May 23 '17 at 12:28

Community

1
1

answered Apr 29 '13 at 06:08

Lix

45,171
10
95
118

I can still pull off the values. My problem is I want those subclass elements (which opens up when the checkbox is checked) should open up automatically when the user visits the page again – Saravanan Sampathkumar Apr 29 '13 at 06:36
Yes - you'll have to do some `trigger('click')` magic to simulate a user clicking those elements... – Lix Apr 29 '13 at 06:38
Well, you inspect the data that you have saved and according to what was previously clicked you recreate the same state. The [trigger function](http://api.jquery.com/trigger/) basically created events such as click or double click. You'd use this trigger function to simulate a real user clicking on an element. – Lix Apr 29 '13 at 06:44

Jquery trigger event for checkbox

3 Answers3