function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

How to make a selected radio option bold?

I am having a scenario where I have to make the selected option of the radio-button list highlighted i.e. bold.

<apex:selectRadio value="{!ItemData}" id="itemOptions">
                <apex:selectOption itemValue="Item 1" itemLabel="Item 1"/>
                <apex:selectOption itemValue="Item 2" itemLabel="Item 2"/>              
</apex:selectRadio>

If I select "Item 1" then the label for "Item 1" should become bold. I know this is possible using Javascript and CSS, but I am unable to find a way how to do it.

I have to use apex tags, html tags suggestions is not possible to implemented.

Best Answer chosen by Admin (Salesforce Developers) 
mast0rmast0r

I would try it with jQuery:

 

First define a style class for the bold label:

 

<style>
.boldOption{
    font-weight:bold;
}
</style>

 Now trigger for the selected option:

 

<script>
jQuery(document).ready(function(){
    
    jQuery('[id$=itemOptions] input').change(function(){
        jQuery('[id$=itemOptions] label').removeClass('boldOption');
        jQuery(this).next('label').addClass('boldOption');
    });

});
</script>

 And here is a visualforce code:

 

<apex:selectRadio value="{!searchString}" id="itemOptions" >
    <apex:selectOption itemValue="Item 1" itemLabel="Item 1"/>
    <apex:selectOption itemValue="Item 2" itemLabel="Item 2"/>
</apex:selectRadio>

 

 

 

All Answers

mast0rmast0r

I would try it with jQuery:

 

First define a style class for the bold label:

 

<style>
.boldOption{
    font-weight:bold;
}
</style>

 Now trigger for the selected option:

 

<script>
jQuery(document).ready(function(){
    
    jQuery('[id$=itemOptions] input').change(function(){
        jQuery('[id$=itemOptions] label').removeClass('boldOption');
        jQuery(this).next('label').addClass('boldOption');
    });

});
</script>

 And here is a visualforce code:

 

<apex:selectRadio value="{!searchString}" id="itemOptions" >
    <apex:selectOption itemValue="Item 1" itemLabel="Item 1"/>
    <apex:selectOption itemValue="Item 2" itemLabel="Item 2"/>
</apex:selectRadio>

 

 

 

This was selected as the best answer
TilakTilak

Thanks mast0r, that has worked in the initial time the page is loaded. But when I will reload the page, I need to keep the radio button checked and highlighted. How to do this with jQuery ?
mast0rmast0r

What do you mean with reload? reRender or completely reload?
TilakTilak

Complete reload.
mast0rmast0r

Sorry, this is already another question...