Web Composite Control

I'm using .NET 2.0 to build web applications.
At the moment I am modifying a page which generates checkboxes and dropdownlists when the main dropdown option changes.
I used CheckBoxList and dynamic dropdownlist to display as follows:

CheckBoxList1 Dropdownlists CheckBoxList2 Dropdownlists

However, as I put them in the alignments between the related checkbox and dropdownlist, the layout was not great and completely out of line. That was because I calculated the margin-top of the dropdown to make it align with the checkbox.

So, in order to fix it, I created custom web controls which group checkbox and dropdownlist and again group those entire composite controls as a list.

Then, what I need to do is when you click on the checkbox, the text of the checkbox is to be changed. I used Javascript and applied the font style as o.style.fontWeight = "bold". However, although it changed the style (I tested it with the 'alerts'), it didn't apply it on the page.

I spent alot on the investigation and later on I found out what happened with the help of my colleague. We tested with 'onmouseover' function and it works and we had an issue only with 'onclick'.

After checking the ViewSource, we realised that onmouseover function is added on the above the composite control and onclick function is added on the checkbox control itself. Generally that is correct. But the checkbox list hasn't got 'text' or attribute like that to change its style as far as I can see.

Thus, the final solution is to get the parentElement of the clicked checkBox and then change the style of that parentElement.

And voila! It works.