自动改变CheckBoxList选择项目的背景颜色
自动改变CheckBoxList选择项目的背景颜色 效果如下图：
实现原理：
通过为CheckBoxList绑定一个前台的onclick事件，来实现选择项的颜色改变。由于CheckBoxList的Item在前台会变成如下标签：
<tr>
<td>
<input id='cbl_i' type='checkbox' name='cbl:i' /> (i为item的序号)
<label for='cbl_i'>ItemText</label> （ItemText为item的文字）
</td>
</tr>
如果单单是为document.getElementById(cbl_i)指定样式的话，那只有那个CheckBox会有底色，而后面的文字就没有。为了使整个项都出现底色，所以就要设置它的上一级的<td>标签的样式。
实现代码：
前台：
<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;
if(isCheck==true)
{
objItem.parentElement.className = 'ItemBgColor';
}
else
{
objItem.parentElement.className = '';
}
}
}
</script>
后台：
cbl.Attributes.Add('onclick','ChangeSelectedItemColor('cbl',''+cbl.Items.Count+'');');