Automatically change the background color of the selected project in CheckBoxList

The effect is shown in the following figure:
Implementation principle:
Bind a front-end onclick event to the CheckBoxList to change the color of the selected item. Because the items in the CheckBoxList will become the following labels at the front end:
<Tr>
<Td>
<Input id = "cbl_ I" type = "checkbox" name = "cbl: I"/> (I is the serial number of item)
<Label for = "cbl_ I"> ItemText </label> (ItemText is the text of item)
</Td>
</Tr>
If you only specify a style for document. getElementById (cbl_ I), only the CheckBox will have a background color, and the subsequent text will not. In order to make the entire item have a background color, you need to set its upper-level <td> label style.
Implementation code:
Front-end:
<Style type = "text/css">
. ItemBgColor {BACKGROUND-COLOR: # ccccff}
</Style>
<Script language = "javascript">
Function ChangeSelectedItemColor (checkBoxListId, numOfItems)
{
// Get the checkboxlist object.
Var objCtrl = document. getElementById (checkBoxListId );
If (objCtrl = null)
      {
Return;
      }
     
For (I = 0; I <numOfItems; I ++)
      {
Var name = checkBoxListId + ':' + I;
Var objItem = document. getElementById (checkBoxListId + '_' + I );
Var isCheck = objItem. checked;