2

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.

2
  • on line 4 and 5 of your script, you should have semi-colons (;) instead of commas (,).
    – Matt K
    Jul 2, 2013 at 15:30
  • 2
    Sorry about this, I edited the code to be properly indented in that area. I used ',' because i have multiple vars I'm creating. Jul 2, 2013 at 15:39

2 Answers 2

3

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.

1
  • I used some of this to fix it. I pull the logic out into two javascript functions and in the '.ready' I do the .each Jul 2, 2013 at 18:29
1

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();
2
  • Thanks for your input Moti. However the problem is still occuring when I return to the search page. Jul 2, 2013 at 15:58
  • Another solution might be moving all return logic to client side (using jquery) the questions is how hard it is. Can you post the controller code ? Jul 2, 2013 at 16:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .