<apex:page sidebar="false" showheader="false">
function changeFontColor(Id,textValue) {
 if(Id.checked) {
  document.getElementById(textValue).style.fontWeight = "bold";
  document.getElementById(textValue).style.color= "green";
 } else {
  document.getElementById(textValue).style.fontWeight = "Normal";
  document.getElementById(textValue).style.color= "black";
 <apex:outputPanel layout="block">
  <label for="checkbox">Click this box</label>
  <input type="checkbox" id="check1" onclick="changeFontColor(this,'{!$Component.theOutputPanel}');" />
 <apex:outputPanel id="theOutputPanel" layout="block">Change Font Color and Font Weight</apex:outputPanel>

Demo Link : http://sfdevforce-developer-edition.na12.force.com/JSinVF

Written by 

I am Sakthivel Madesh, a certified Salesforce Advanced Developer & Administrator working on Salesforce Technology since 2011. I am currently working in Techforce Services as Sr. Salesforce Developer. I have worked on multiple technologies Like PHP, Java, Salesforce, I am very passionate about Salesforce and to earn 15x Salesforce Certification. I love Trailhead for learning Salesforce Skill and Become a Trailhead 5x Ranger too. I Love to Learn & Share my Salesforce knowledge to Salesforce Learners/Beginner using My Blog and Salesforce Community.

Leave a Reply

Your email address will not be published. Required fields are marked *