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-29 07:05:38Z

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, 2013 at 7:05

answered Apr 29, 2013 at 6:26

saifur

6374 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saravanan Sampathkumar Over a year ago

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

saifur Over a year ago

edited my code try again. Is the .main checkbok showing right status ? How did you manage that ?

Saravanan Sampathkumar Over a year ago

Dint work! Instead it s checking all checkboxes when I refresh the page. I don know wy?

adeneo · Accepted Answer · 2013-04-29 06:53:53Z

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, 2013 at 6:53

answered Apr 29, 2013 at 6:33

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

Saravanan Sampathkumar Over a year ago

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

adeneo Over a year ago

And with this code it will, for all eternity even! For just the session use sessionStorage.

Community · Accepted Answer · 2017-05-23 12:28:09Z

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, 2017 at 12:28

CommunityBot

11 silver badge

answered Apr 29, 2013 at 6:08

Lix

48.2k12 gold badges107 silver badges134 bronze badges

3 Comments

Saravanan Sampathkumar Over a year ago

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

Lix Over a year ago

Yes - you'll have to do some trigger('click') magic to simulate a user clicking those elements...

Lix Over a year ago

Well, you inspect the data that you have saved and according to what was previously clicked you recreate the same state. The trigger function basically created events such as click or double click. You'd use this trigger function to simulate a real user clicking on an element.

Collectives™ on Stack Overflow

Jquery trigger event for checkbox

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related