In Visualforce page, I am displaying the list of permissions as checkboxes.

<apex:selectCheckboxes layout="pageDirection" value="{!userPermission}">
        <apex:selectOptions value="{!AllPermissions}"><br /></apex:selectOptions>

Here userPermission is a String variable and AllPermissions are the list of Permission__c object. It is displaying the list of all permissions. see the screenshot below : enter image description here Now what i need to ask you is ,for example when any user clicks on "verify invoices" then "view invoice" options should automatically selected. how will i achieve this functionality over dynamically generated checkboxes.

How can i get to know id of selected checkboxes on the visualforce page at run time ? and how can i apply onselect function over specific checkbox ?

Followed the code steps :

  1. Created the Developer__c field in the Permission__c Object with assigning some values to it.

  2. Earlier I was adding the Id and PermissionName__c to the List but now I have added DeveloperID__c and PermissionName__c instead of ID.

    List<SelectOption> listPermission = new List<SelectOption>();
    for(Permission__c per : allPermissions) {
        listPermission.add(new SelectOption(per.DeveloperId__c,per.PermissionName__c));
    return listPermission;
  3. Visual Force page code is same as above written

  4. After rendering this page on the browser and developer id and name looks like

enter image description here

Now the problem is , how to get checkbox element in javascript so that i can apply some logic on particular permission checkbox. and Developer id is coming into value field, i want this developer field should become in "Id" attribute.

please reply as soon as possible.

2 Answers 2


Since your values come from Permission__c there you might already have a name which you are displaying as label (I assume Label__c). Now you could add the a field at Permission__c called DeveloperId__c and use a short version of the label without spaces and special characters.

You can set the Id if you use an <apex:repeat> to generate single <apex:selectOption> tags. Therefore you need to query you Permission__c into a property, eg. permissions.

<apex:repeat value="{!permissions}" var="permission" >
     <apex:selectOption id="{!permission.DeveloperId__c}" itemValue="{!permission.Label__c}" itemLabel="{!permission.Label__c}" />

But be aware that the Id in Salesforce get mangled and you will end up with strange prefixes. I prefer in most cases to use styleClass instead which is also supported by <apex:selectOption> http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_selectOption.htm

<apex:selectOption styleClass="{!permission.DeveloperId__c} yourRealCSSClass" itemValue="{!permission.Label__c}" itemLabel="{!permission.Label__c}" />

Since more than one html-class is allowed (space separated) in styleClass, you can add your "real" CSS class too (in this example yourRealCSSClass). Therefore remember not to use spaces in your DeveloperId__c!

To trigger changes and implement logic I would use jquery to trigger check/uncheck for the checkboxes http://api.jquery.com/change/

If you want to bind a handler on all boxes you can do it like

$( ".yourRealCSSClass" ).change(function() {
    alert( "Your logic goes here" );
  • When I am using <apex:selectOption> with <apex:repeat> , It gives me the compile time error. Dec 2, 2014 at 6:23
  • Compilation error: Attribute styleClass for the &lt;apex:selectOption&gt; component has been deprecated in this version and cannot be used in this page in AddCustomRole at line 92 column 182 Dec 2, 2014 at 6:27
  • Here is my code snippet : <apex:repeat value="{!permissions}" var="permission" > <apex:selectOption styleClass="{!permission.DeveloperId__c}" itemValue="{!permission.PermissionName__c}" itemLabel="{!permission.PermissionName__c}" /> </apex:repeat> Dec 2, 2014 at 6:28
  • Sorry my fault. Depreciated since v17. Then you got to go with the id tag but then your selectors become harder but jquery has "contains" selectors.
    – Uwe Heim
    Dec 2, 2014 at 9:27
  • To get the styleClass back you also could use a htmt pass through attribute and use jquery addClass()
    – Uwe Heim
    Dec 2, 2014 at 9:33


seletfuntion(val) { alert(val.value); }

when you pass this as param in function it will give you selected checkbox value and then perform your validation .

If you have to check on submit validation that any of checkbox is selected then use below script if($(".testClass:checked").length == 0) { alert('Please select at least one check box'); }

You must log in to answer this question.

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