自动改变CheckBoxList选择项目的背景颜色

王朝c#·作者佚名  2006-12-17
窄屏简体版  字體: |||超大  

自动改变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+'');');

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航