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

效果如下图:

实现原理:

通过为 CheckBoxList 绑定一个前台的 onclick 事件,来实现选择项的颜色改变。由于 CheckBoxList 的 Item 在前台会变成如下标签:

1<tr>
2<td>
3<input id="cbl_i" name="cbl:i" type="checkbox"/> (i  为  item  的序号  ) 
4
5<label for="cbl_i">ItemText</label> (  ItemText  为  item  的文字) 
6
7</td>
8</tr>

如果单单是为 document.getElementById(cbl_i) 指定样式的话,那只有那个 CheckBox 会有底色,而后面的文字就没有。为了使整个项都出现底色,所以就要设置它的上一级的

 1<td> 标签的样式。 
 2
 3实现代码: 
 4
 5前台: 
 6
 7<style type="text/css">
 8
 9.ItemBgColor {BACKGROUND-COLOR: #ccccff} 
10
11</style>
12<script language="javascript">
13
14function ChangeSelectedItemColor(checkBoxListId, numOfItems) 
15
16{ 
17
18// Get the checkboxlist object. 
19
20var objCtrl = document.getElementById(checkBoxListId); 
21
22if(objCtrl == null) 
23
24{ 
25
26return; 
27
28} 
29
30for(i = 0; i < numOfItems; i++) 
31
32{ 
33
34var name=checkBoxListId+':'+i; 
35
36var objItem = document.getElementById(checkBoxListId + '_' + i); 
37
38var isCheck = objItem.checked; 
39
40if(isCheck==true) 
41
42{ 
43
44objItem.parentElement.className = 'ItemBgColor'; 
45
46} 
47
48else 
49
50{ 
51
52objItem.parentElement.className = ''; 
53
54} 
55
56} 
57
58} 
59
60</script>
61
62后台: 
63
64cbl.Attributes.Add("onclick","ChangeSelectedItemColor('cbl','"+cbl.Items.Count+"');");</td>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus