Using JQuery, wanting checkboxes to be checked based off of criteria

Question

I have implemented several apex:inputCheckboxes in my Visualforce pages. I used a JQuery function to handle the showing and hiding of these functions. I have outer checkboxes that once checked displays inner checkboxes for each outer one.

Everything works perfectly except for one thing. I added an "if" statement to check if all of the inner checkboxes have been unchecked, then uncheck the corresponding outer checkbox. This works in all aspects except one. I have a "Return" function on my pages that will allow the user to go to a previous search and it will save the users selections(which are the checkboxes). When the user comes back to the search page, the appropriate checkboxes are checked, however, deselecting the inner checkboxes does not deselect the outer one. I know this is happening because the outer one was never "clicked" when it returns (I set the selected value in the controller).

Sorry if this was long-winded. Here is my JQuery function:

<script type="text/javascript">
   var j$ = jQuery.noConflict(); 
     j$(document).ready(function() {
        j$('.check').click(function () {
           var divId = '#versionCheckboxes' + j$(this).attr('title').trim(), //get the id of the versions checkboxes
               extendedDiv = divId + ' .versionCheckbox tbody tr td input', //get the exact location
               chk = (this); //used for closing checkboxes

           if(j$(this).is(':checked')) {
              j$(extendedDiv).attr('checked', true);
              j$(divId).show();

              //this function is called if you uncheck all inner boxes, it will uncheck the outer box
              j$(extendedDiv).click(function() {
                if (j$(extendedDiv).is(':checked') == false) {
                    j$(chk).attr('checked', false);
                    j$(divId).hide();
                }
               });  
            }
            else {
              j$(extendedDiv).attr('checked', false);
              j$(divId).hide();
            }
         });
       });
 </script>

Now when I return to the search page, and I manually deselect then re-select the outer checkbox, it works. It is just the initial return that doesn't do what I want.

I am not extremely knowledgeable with JQuery so any help would be greatly appreciated.

Answer 1

What if you do something as simple as: $j('.check:checked').each(function(){$j(this).trigger('click');}); on doc ready? That would simulate a click event and kick off the JS you pasted. You may wind up needing to find the deepest checkbox in the DOM to get the exact results you are looking for though.

Answer 2

Try using change method instead of click that will trigger this function even when you change the status from controller. However if the status is set before the page renders this still will not work a litle hack might be calling click on all checkboxes twice (which will preserve they state but trigger your logic)

j$('.check').click();
j$('.check').click();