Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
TanejaTaneja 

adding CSS styles to apex:inputcheckbox

I am trying to achieve a simple thing but somehow not able to get the desired result, may be due to my amateur CSS skills.

I have an apex:inputcheckbox and all I want is, when someone selects this checkbox, the CSS of accompanying should change i.e., just to show this one is highlighted. Just want to make it bold and different colour. Here is my sample:

 

<apex:pageBlockSectionItem > 
            <apex:inputCheckbox value="{!Dept2}" label="">Elektron
                <apex:actionsupport event="onchange" action="{!getSomething}" rerender="working" />     
            </apex:inputCheckbox>   
</apex:pageBlockSectionItem>

 

The inputcheckbox is a subsection in pageBlockSectionItem. There are 10 items for the user to select and I want to highlight which one he has selected. When I display "Elektron" in the label, it doesn't show you up on the screen.

The function getSomething is an apex page-reference function and displays result in another PageBlockSection depending upon user selection

It doesn't matter if we use jquery or not, although I believe this can be achieved without query.

Many thanks in advance.

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi,

 

This can be done. You can apply style both to a checkbox field borders. Try the following,

 

<apex:page standardController="Account" >    
    <apex:form id="working">
      <apex:pageblock>
                    <apex:inputcheckbox value="{!Account.Check__c}" rendered="{!Account.Check__c == false}"> //This will just retrive the checkbox and font without style.
                        <apex:outputlabel value="Check box value"/>
                        <apex:actionsupport event="onchange" rerender="working" />     
                    </apex:inputcheckbox > 
                      <apex:inputcheckbox value="{!Account.Check__c}" rendered="{!Account.Check__c == true}" style="outline: 2px solid green;">
                        <b><apex:outputlabel style="color:green;" value="Check box value"/></b>
                        <apex:actionsupport event="onchange" rerender="working" />
                    </apex:inputcheckbox >  //This will render the bold font with checkbox styles applied.
     </apex:pageblock>         
    </apex:form>
</apex:page>

 

 

In the above example code, I have a check box field on Account object named 'Check__c'. So, to apply styles to that field you can use the outline: 2px solid green;, It has two renders, if checkbox is selected or not selected, both will give different outputs.

 

Hope so this helps you...!

Please mark this answer a Solution and please give kudos by clicking on the star icon, if you found this answer as helpful.
kitsunebravekitsunebrave
Hi,

Regarding CSS selector and Javascript side. I have two table primary and secondary. I want to retrieve the Product Info from primary table and show from secondary table. The Wrapper logic is completed, however, I need to display multiple selection based on one or more Products. Here is the Partial visualforce page and the apex method.

I am trying to perform this logic to refresh a checkbox based on specific selected filter values regardless any approaches using CSS or JavaScript.

I am waiting from anyone to answer this question regardless the @kmccoll and @TehNrd. How can complete and avoid this issue basically to have a Specific Salesforce Record based on the selection of the Product Checkbox.

Please, follwing is the related business scenario for this issue:
  
<table width="100%" border="2">
  <tr>
      <td width="75" valign="top" ><b>Search by Product</b>
           <div style="overflow:auto; height:250px;">
              <apex:pageBlockTable title="Search by Product Table" value={!ProductFilters}" var="productrecord" id="productsList">
                  <apex:column style="width:25px" >
                     <apex:inputCheckbox id="productLine1" onclick="showContent(this)" value="{!productrecord.selectedProduct}" />
                   </apex:column>
                   <apex:column style="width:50px" onclick="uncheckOther('productLine1')" value="{!productrecord.filter.Entitlement}" >
                   </apex:column>
               </apex:pageBlockTable>
            </div>
         </td>
    </tr>
</table>
<table width="100%" border="2" id="splitTable">
   <tr>
       <td width="100%" valign="top">
          <div id="content" style="overflow:auto; height:400px; display: block">
               <apex:pageBlockTable title="Results of the selection of Version/Entitlement Products on the initial page" value="{!displayItems}" var="record" id="displayListing">
                   <apex:column style="width:25px" >
                       <apex:facet name="header">
                         <apex:inputCheckbox id="displayChkBx" onclick="checkAll('productLine1','{!$Component.displayListing}', 'displayItemsLine1')" />
                       </apex:facet>
                         <apex:inputCheckbox value="{!record.selected}" id="selectLine1" />
                    </apex:column>
                    <apex:column id="colVersion" style="width:60px" value="{!record.dispItem.ProductVersion}" headerValue="Release Version">
                    </apex:column>
               </apex:pageBlockTable>
             </div>
          </td>
     </tr>
</table>
Apex code:
  
// Multi-select filter options

	public void filterBySelections()
	{
		selectionItemsListing.SetSelectedItemsList(collectSelectedProducts(), 
			collectSelectedVersions(), 
			collectSelectedComponents(), 
			collectSelectedBacklogs());
			
	}

 public Set<String> collectSelectedProducts()
    {
    	Set<String> allProducts = new Set<String>();
        this.selectedProductFilters.clear();
        for(productFilterWrapper productWrapper : this.productFiltersList)
        {
            if(productWrapper.selectedProduct == true)
            {
	        	System.debug('Product selected: ' + productWrapper.filter.Entitlement);
        		allProducts.add(productWrapper.filter.Entitlement);
            	this.selectedProductFilters.add(productWrapper.filter);
            }
        }
        return allProducts;
    }
Javascript Code:
  
/*show/hide content*/
function showContent(chkboxCtrl){
	try{
		Product = document.getElementById('{!$Component.frm.secondTable.bottomTableId.splitTable.content.displayListing.colProduct}');
  		Version = document.getElementById('{!$Component.frm.secondTable.bottomTableId.splitTable.content.displayListing.colVersion}');
  		Component = document.getElementById('{!$Component.frm.secondTable.bottomTableId.splitTable.content.displayListing.colComponent}');
  		Backlog = document.getElementById('{!$Component.frm.secondTable.bottomTableId.splitTable.content.displayListing.colBacklog}');
		if (chkboxCtrl.checked){
			if(Product != null)
				Product.style.display = 'block';
			else
				Product.style.display = 'none';
			if(Version != null)
				Version.style.display = 'block';
			else
				Version.style.display = 'none';
			if(Component != null)
				Component.style.display = 'block';
			else
				Component.style.display = 'none';
			if(Backlog != null)
				Backlog.style.display = 'block';
			else
				Backlog.style.display = 'none';
		}			
		else
			document.getElementById('{!$Component.frm.secondTable.bottomTableId.splitTable.content.displayListing}').style.display = 'none';
	}
	catch(e){
		alert(e);
	}	
}
/*uncheck content and checkbox*/
var selectedChkbox;

function uncheckOther(chkboxCtrl){
	if(chkboxCtrl.checked){
		if((chkboxCtrl != selectedChkbox) && (selectedChkbox != null)){
			selectedChkbox = false;
		}
		selectedChkbox = chkboxCtrl;
	}
}

Any helps will be appreciate in advance.

Thanks.