[SalesForce] How to get this apex:repeat variable in javascript

I have a list of Strings which can be selected or not. When the user clicks save, I need to check which Strings are selected or not from within Javascript.

I made an inner class to set a selected value for each String:

public class RelatedListWrapper{

        public String relListName {get;set;}
        public Boolean selected {get;set;}

        public RelatedListWrapper(String s){

            relListName = s;
            selected = false;           
        }
    }

and in the class itself I have the following variable:

public List<RelatedListWrapper> relatedListNames {get;set;}

which I am populating in the class.

In the Visualforce page, I have the following code:

<apex:pageBlockSection columns="1">
                <apex:outputPanel id="relatedListSelect">
                    <apex:repeat value="{!relatedListNames}" var="relList" id="theRelLists">
                        <apex:inputCheckbox value="{!relList.selected}"/>
                        <apex:outputText value="{!relList.relListName}"/><br/>
                    </apex:repeat>                                              
                </apex:outputPanel>
            </apex:pageBlockSection>

I have tried several ways of accessing this in javascript, including creating an Array and calling the push method for each repeat value, but as 'selected' is initially set to false, it doesn't recognize it has been checked.

I also tried getting a reference to the outputPanel with

<script> var relatedLists = document.getElementById("{!$Component.relatedListSelect}");</script>

which gives me an HTMLSpanElement I'm not sure what to do with.

Can anyone help? I can use jQuery if this is easier.

Best Answer

Add a styleclass="" to your components, then use jQuery's selectors. You can't use Id because it has to be set to a static item.

<apex:pageBlockSection columns="1">
                <apex:outputPanel id="relatedListSelect">
                    <apex:repeat value="{!relatedListNames}" var="relList" id="theRelLists">
                        <apex:inputCheckbox styleClass="{!relList.relListName} inputIsChecked" value="{!relList.selected}"/>
                        <apex:outputText value="{!relList.relListName}"/><br/>
                    </apex:repeat>                                              
                </apex:outputPanel>
</apex:pageBlockSection>

Then in jQuery you can do: 

<script type="text/javascript">
$('.inputIsChecked').each(function(i,o){
   $(o).is(':checked');
   //can get the name of the element here in a variety of ways, 
   //split the classes and take the one that is the name of the list-element. 
});
</script>

Does that get you started?

Related Topic