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

新客网 XKER.COM 2005-07-20 来源：收藏本文

效果如下图：

实现原理：

通过为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>标签的样式。

实现代码：

前台：

.ItemBgColor {BACKGROUND-COLOR: #ccccff}

</style>

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+"');");

【收藏】【评论】【推荐】【投稿】【打印】【关闭】