效果如下图:
实现原理:
通过为 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>