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

王朝other·作者佚名  2006-01-31
窄屏简体版  字體: |||超大  

效果如下图:

实现原理:

通过为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- 王朝網路 版權所有 導航