Javascript with Visualforce pages

VISUALFORCE and JS CODE:

<apex:page>

<script>
function changeFont(input, textid) {
if(input.checked) document.getElementById(textid).style.fontWeight = "bold";
else document.getElementById(textid).style.fontWeight = "normal";
}
</script>

<apex:outputPanel layout="block">
<label for="checkbox">Click this box to change text font: </label>
<input id="checkbox" type="checkbox"
onclick="changeFont(this,'{!$Component.thePanel}');"/>
</apex:outputPanel>

<apex:outputPanel id="thePanel" layout="block">Change me!
</apex:outputPanel>
</apex:page>

Note:

'{!$Component.idName}' : This is the way of passing particular visualforce component id into the javascript.