最近用到checklistbox控件,在使用其过程中,花了较多的时间,这里我收集了其相关的代码段,希望对大家有所帮助。

常用操作

1. 自定义数据

这种方法是绑定已经给定(自定义)的字段(这种方法是绑定给定的值,就是在编写控件时给Text赋的值): 前台代码:
  1. <asp:CheckBoxList ID="CheckBoxList1" runat="server">
  2. <asp:ListItem Text ="苹果"></asp:ListItem>
  3. <asp:ListItem Text ="柠檬"></asp:ListItem>
  4. <asp:ListItem Text ="橘子"></asp:ListItem>
  5. <asp:ListItem Text ="桃子"></asp:ListItem>
  6. </asp:CheckBoxList>
  7. <asp:Button ID="Button1" runat="server" Text="结果" OnClick ="Button1_Click"/>
  8. <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
后台代码:
  1. /// <summary>
  2. /// Button单击事件
  3. /// </summary>
  4. /// <param name="sender"></param>
  5. /// <param name="e"></param>
  6. protected void Button1_Click(object sender, EventArgs e)
  7. {
  8. string s = string.Empty;
  9. for (int i = 0; i < this.CheckBoxList1.Items.Count; i++)
  10. {
  11. if (this.CheckBoxList1.Items[i].Selected)
  12. {
  13. s += this.CheckBoxList1.Items[i].Text + " ";
  14. }
  15. }
  16. this.Label1.Text = "你选择的水果有:" + s;
  17. }
最终效果:

ASP | Checklistbox - 图1

2. 绑定数据库数据

建立的表:

ASP | Checklistbox - 图2

前台代码:
  1. <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack ="true"></asp:CheckBoxList>
  2. <asp:Button ID="Button1" runat="server" Text="结果" OnClick ="Button1_Click"/><br /><br />
  3. <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
CheckBoxList控件,如果要是在后台代码之中绑定数据,那么在前台代码做任何修改。 其中,AutoPostBack要为true才可。 后台代码: 后台之中Page_load中的代码(代码初始化,用于打开界面是就进行数据绑定):
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!IsPostBack)
  4. /* 为什么判断IsPostBack:当你需要执行一些仅需要在页面第一次浏览时执行的事件
  5. * 比如页面初始化,数据绑定之类的操作时,需要将操作放在if(!IspostBack)里面,
  6. * 这样当你在点击页面中的按钮或者执行其他回发事件时,不贵再次初搜索始化或者
  7. * 重复绑定数据,提高了执行效率。
  8. */
  9. {
  10. string connectionString = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
  11. SqlConnection connection = new SqlConnection(connectionString);
  12. connection.Open();
  13. string sql = "SELECT * FROM KK";
  14. SqlCommand cmd = new SqlCommand(sql, connection);
  15. SqlDataReader sdr = cmd.ExecuteReader();
  16. //任意给的字段名,只要是想显示在界面上的就行。其值给了:Text
  17. this.CheckBoxList1.DataTextField = "name";
  18. //任意给得字段名,只要是想在后台看到前台看不到的数据就行。其值给了:Value
  19. this.CheckBoxList1.DataValueField = "id";
  20. this.CheckBoxList1.DataSource = sdr;
  21. this.CheckBoxList1.DataBind();
  22. sdr.Close();
  23. connection.Close();
  24. }
  25. }
其中,检查网页是否会发很重要。if (!IsPostBack)。如果没有这个,将无法使用。 后台之中Button(结果)按钮:
  1. /// <summary>
  2. /// Button单击事件
  3. /// </summary>
  4. /// <param name="sender"></param>
  5. /// <param name="e"></param>
  6. protected void Button1_Click(object sender, EventArgs e)
  7. {
  8. string s = string.Empty;
  9. for (int i = 0; i < CheckBoxList1.Items.Count; i++)
  10. {
  11. if (this.CheckBoxList1.Items[i].Selected)
  12. {
  13. s += " 界面上能看到的值(对应控上的Text属性): "
  14. + this.CheckBoxList1.Items[i].Text.ToString()
  15. + "<br/>界面上看不到的值,源程序中能看到(对应控件上的Value属性):"
  16. + this.CheckBoxList1.Items[i].Value.ToString() + "<br/><br/>";
  17. }
  18. }
  19. this.Label1.Text = s;
  20. }
最终运行效果:

ASP | Checklistbox - 图3

3. 全选,取消全选

首先要在前台中加一个CheckBox控件,用来控制是否全选:
  1. <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack ="true"></asp:CheckBoxList><br /><br />
  2. <asp:CheckBox ID ="checkbox1" runat ="server" Text ="全选" AutoPostBack ="true" OnCheckedChanged ="checkbox1_CheckedChanged1"/>
  3. <asp:Button ID="Button1" runat="server" Text="结果" OnClick ="Button1_Click"/><br /><br />
  4. <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
下划线标注的代码就是添加的CheckBox控件,用来决定是否全选。其中OnCheckedChange事件决定当选择改变时执行什么代码。 其中,设置:AutoPostBack =”true” 很重要。 后台代码(checkbox1_CheckedChanged1事件):
  1. /// <summary>
  2. /// checkbox1_CheckedChanged1当选择改变时执行相应的代码
  3. /// </summary>
  4. /// <param name="sender"></param>
  5. /// <param name="e"></param>
  6. protected void checkbox1_CheckedChanged1(object sender, EventArgs e)
  7. {
  8. if (this.checkbox1.Checked)
  9. {
  10. for (int j = 0; j < this.CheckBoxList1.Items.Count; j++)
  11. {
  12. this.CheckBoxList1.Items[j].Selected = true;//全部设置为选中
  13. }
  14. }
  15. else
  16. {
  17. for (int k = 0; k < this.CheckBoxList1.Items.Count; k++)
  18. {
  19. this.CheckBoxList1.Items[k].Selected = false;//全部设置为未选中
  20. }
最终执行效果: 选中:

ASP | Checklistbox - 图4

未选中:

ASP | Checklistbox - 图5

4. 获得CheckBox的选中值

4.1 C#获取
  1. //第一种:获得CheckBox的选中值
  2. string save_cblJL = "";
  3. for (int i = 0; i < this.cblJL.Items.Count; i++)
  4. {
  5. if (this.cblJL.Items[i].Selected == true)
  6. {
  7. save_cblJL += this.cblJL.Items[i].Value + ",";
  8. }
  9. }
  10. //第二种:获得CheckBox的选中值
  11. string str_Save_cblJL = "";
  12. foreach (ListItem li in cblJL.Items)
  13. {
  14. if (li.Selected == true)
  15. {
  16. str_Save_cblJL += li.Value + ",";
  17. }
  18. }
4.2 Js获取
  1. 通过item的Attributes
网上找了好多都是通过添加CheckBoxList的Attributes来实现,看起来感觉有点麻烦,故自己想了下也是通过添加Attributes来实现,但是通过添加item的Attributes不是CheckBoxList的Attributes。 以下是具体的实现方法: 后台代码:
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. IList<test> testList = new List<test>();
  4. for (int i = 0; i < 10; i++) {
  5. test t = new test();
  6. t.Name = "name"+i;
  7. t.Code = "code" + i;
  8. testList.Add(t);
  9. CheckBoxList1.DataSource = testList;
  10. CheckBoxList1.DataTextField = "name";
  11. CheckBoxList1.DataValueField = "code";
  12. CheckBoxList1.DataBind();
  13. }
  14. }
  15. protected void CheckBoxList1_DataBound(object sender, EventArgs e)
  16. {
  17. foreach (ListItem item in CheckBoxList1.Items)
  18. {
  19. item.Attributes["valueCode"] = item.Value;
  20. }
  21. }
主要是通过DataBound的时候设置item的Attributes 前台页面代码:
  1. <asp:CheckBoxList ID="CheckBoxList1" runat="server" OnDataBound="CheckBoxList1_DataBound">
  2. </asp:CheckBoxList>
  3. <input id="Button1" type="button" value="button" onclick="getCheckValue();" />
Js代码:
  1. <script type="text/javascript" language="javascript">
  2. function getCheckValue() {
  3. var chkObject = document.getElementById("CheckBoxList1");
  4. var chkInput = chkObject.getElementsByTagName("input");
  5. var item="";
  6. for (var i = 0; i < chkInput.length; i++) {
  7. if (chkInput[i].checked) {
  8. item += chkInput[i].parentNode.valueCode + ",";
  9. }
  10. }
  11. alert(item);
  12. }
  13. </script>
主要是通过获取所选中项的前一个元素的属性valueCode,就是在后台代码中添加item的属性 以下是本文的效果图:

ASP | Checklistbox - 图6

  1. 通过innerText
  1. <script type="text/javascript" language="javascript">
  2. function getCheckValue() {
  3. var chkObject = document.getElementById("CheckBoxList1");
  4. var chkInput = chkObject.getElementsByTagName("input");
  5. var item="";
  6. for (var i = 0; i < chkInput.length; i++) {
  7. if (chkInput[i].checked) {
  8. item += chkInput[i].parentNode.childNodes[1].innerText + ",";
  9. }
  10. }
  11. alert(item);
  12. }
  13. </script>

这里的<font style="color:rgb(56, 58, 66);background-color:rgb(250, 250, 250);">.childNodes[</font><font style="color:rgb(152, 104, 1);background-color:rgb(250, 250, 250);">1</font><font style="color:rgb(56, 58, 66);background-color:rgb(250, 250, 250);">].innerText</font>可以打印parentNode看看需要的数据在那个节点,一般都是<font style="color:rgb(56, 58, 66);background-color:rgb(250, 250, 250);">childNodes[</font><font style="color:rgb(152, 104, 1);background-color:rgb(250, 250, 250);">1</font><font style="color:rgb(56, 58, 66);background-color:rgb(250, 250, 250);">]</font>

  1. 与第二种方法相似,但是用了双层for循环,不推荐。
  1. var v = new Array();
  2. var CheckBoxList = document.getElementById("chose_courses_cbl");
  3. for (i = 0; i < CheckBoxList.rows.length; i++)
  4. for (j = 0; j < CheckBoxList.rows[i].cells.length; j++)
  5. if (CheckBoxList.rows[i].cells[j].childNodes[0])
  6. if (CheckBoxList.rows[i].cells[j].childNodes[0].checked == true)
  7. v.push(CheckBoxList.rows[i].cells[j].childNodes[1].innerText);
  8. document.getElementById("courses").value = v;
  9. document.getElementById("form1").submit();

5. CheckBoxList赋值

  1. foreach (string str in split)
  2. {
  3. for (int i = 0; i < CheckBoxList1.Items.Count; i++)
  4. {
  5. if (CheckBoxList1.Items[i].Text == str)
  6. {
  7. CheckBoxList1.Items[i].Selected = true;
  8. }
  9. }
  10. }

6. 判断是否选中

  1. var flag1=0;
  2. var checkobj = document.getElementById("CheckBoxList1");
  3. var checks = checkobj.getElementsByTagName("input");
  4. for(var n=0;n<checks.length;n++)
  5. {
  6. if(checks[n].type=="checkbox" && checks[n].checked==true)
  7. {
  8. flag1=1;
  9. }
  10. }
  11. if(flag1==0)
  12. {
  13. alert("请选择栏目设置!");
  14. return false;
  15. }

CheckBoxList控件的属性和事件

  1. AutoPostBack属性:用于设置当单击checkboxList控件时,是否自动回送到服务器。True表示回送;False(默认)表示不回送。
  2. DataSource属性:用于指定填充列表控件的数据源。
  3. DataTextField属性:指定DataSource中一个字段,该字段的值对应于列表项的Text属性。
  4. DataValueField属性:指定DataSource中一个字段,字段的值对应于列表项的Value属性。
  5. Items属性:表示复选框列表中各个选项的集合,如CheckBoxList1.Items(i)表示第i个选项,i从0开始。每个选项都有以下3个基本属性:
  • Text属性:表示每个选项的文本。
  • Value属性:表示每个选项的选项值。
  • Selected属性:表示该选项是否被选中。
  • Count属性:通过Items.Count属性可获得CheckBoxList控件的选项数;
  • Add方法:通过items.Add方法可以向CheckBoxList控件添加选项;
  • Remove方法:通过items.Remove方法,可从CheckBoxList控件中删除指定的选项;
  • Insert方法:通过items.insert方法,可将一个新的选项插入到CheckBoxList控件中;
  • Clear方法:通过items.clear方法可以清空CheckBoxList控件中的选项。
  1. RepeatColumns属性:用于指定在CheckBoxList控件中显示选项占用几列。默认值为0,表示任意多列。
  2. RepeatDirection属性:用于指定CheckBoxList控件的显示方向。Vertical时,列表项以列优先排列的形式显示;Horizontal时,列项以行优先排列的形式显示。
  3. RepeatLayout属性:用于设置选项的排列方式。Table(默认)时,以表结构显示,属性值为Flow时,不以表结构显示。
  4. SelectedIndex属性:用于获取或设置列表中选定项的最低序号索引值。如果列表控件中只有一个选项被选中,则该属性表示当前选定项的索引值。
  5. SelectedItem属性:用于获取列表控件中索引值最小的选定项。如果列表中只有一个选项被选中,则该属性表示当前选定项。通过该属性可获得选定项的Text和Value属性值。
  6. SelectedIndexchanged事件:当用户选择了列表中的任意复选框时,都将引发事件。

摘录

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. if (checkedListBox1.GetItemChecked(i))
  4. {
  5. MessageBox.Show(checkedListBox1.GetItemText(checkedListBox1.Items[i]));
  6. }
  7. }

1. 添加项

  1. checkedListBox1.Items.Add("蓝色");
  2. checkedListBox1.Items.Add("红色");
  3. checkedListBox1.Items.Add("黄色");

2. 判断第i项是否选中,选中为true,否则为false

  1. ifcheckedListBox1.GetItemChecked(i))
  2. {
  3. return true;
  4. }
  5. else
  6. {
  7. return false;
  8. }

3. 设置第i项是否选中

  1. checkedListBox1.SetItemChecked(i, true); //true改为false为没有选中。

4. 设置全选

添加一个名为select_all的checkbox控件,由其控制checkedListBox是全选还是全不选。

  1. private void select_all_CheckedChanged(object sender, EventArgs e)
  2. {
  3. if(select_all.Checked)
  4. {
  5. for (int j = 0; j < checkedListBox1.Items.Count; j++)
  6. checkedListBox1.SetItemChecked(j, true);
  7. }
  8. else
  9. {
  10. for (int j =0; j < checkedListBox1.Items.Count; j++)
  11. checkedListBox1.SetItemChecked(j, false);
  12. }
  13. }

5. 得到全部选中的值,并将选中的项的文本组合成为一个字符串.

  1. string strCollected = string.Empty;
  2. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  3. {
  4. if (checkedListBox1.GetItemChecked(i))
  5. {
  6. if (strCollected == string.Empty)
  7. {
  8. strCollected = checkedListBox1.GetItemText(checkedListBox1.Items[i]);
  9. }
  10. }
  11. else
  12. {
  13. strCollected = strCollected + "/" + checkedListBox1.
  14. GetItemText(checkedListBox1.Items[i]);
  15. }
  16. }

6. 设置CheckedListBox中第i项的Checked状态

  1. checkedListBox1.SetItemCheckState(i, CheckState.Checked);

7. 全选

  1. private void checkBoxAll_CheckedChanged(object sender, EventArgs e)
  2. {
  3. if (checkBoxAll.Checked)
  4. {
  5. //被选择了则将CheckedListBox中的所有条目都变为Checked状态
  6. for (int i = 0; i < checkedListBoxLayerControl.Items.Count;i++)
  7. {
  8. checkedListBoxLayerControl.SetItemCheckState(i,
  9. CheckState.Checked);
  10. }
  11. }
  12. else
  13. {
  14. //否则变成Unchecked状态
  15. for (int i = 0;i < checkedListBoxLayerControl.Items.Count; i++)
  16. {
  17. checkedListBoxLayerControl.SetItemCheckState(i, CheckState.Unchecked);
  18. }
  19. }
  20. }

8. checkedListBox 单选设置(代码实现)

  1. private void chkl_ItemAuditing_ItemCheck(object sender,ItemCheckEventArgs e)
  2. {
  3. if (chkl_ItemAuditing.CheckedItems.Count > 0)
  4. {
  5. for (int i = 0; i < chkl_ItemAuditing.Items.Count; i++)
  6. {
  7. if (i != e.Index)
  8. {
  9. this.chkl_ItemAuditing.SetItemCheckState(i,
  10. System.Windows.Forms.CheckState.Unchecked);
  11. }
  12. }
  13. }
  14. }

9. checkedListBox1显示一个数据库中关键字对应的所有记录

  1. for (int i = 0; i < table.Rows.Count; i++)
  2. {
  3. string name = table.Rows["myname"].ToString();
  4. string paw = table.Rows["mypaw"].ToString();
  5. checkedListBox1.Items.Add(name + paw);
  6. }

10.

  1. for(i=0;i<CheckedListBox.Items.Count;i++)
  2. {
  3. if(CheckedListBox.GetItemText(CheckedListBox.Items)=="你得到的值")
  4. {
  5. CheckedListBox.SetItemChecked(i,true);
  6. }
  7. }

11. 清除checkedListBox1中所有的选项

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. checkedListBox1.Items.Clear();
  4. }

12. 设置索引为index的项为选中状态

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. checkedListBox1.SetItemChecked(i, true);
  4. }

13.

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. if (checkedListBox1.GetSelected(i))
  4. {
  5. MessageBox.Show(checkedListBox1.CheckedItems.ToString());
  6. }
  7. }

14. 选中checkedListBox1所有的选项

  1. for(int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. checkedListBox1.SetItemCheckState(i, CheckState.Checked);
  4. }

15.

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. //如果checkedListBox1的第i项被选中,
  4. //则显示checkedListBox1对应的值
  5. if (checkedListBox1.GetItemChecked(i))
  6. {
  7. MessageBox.Show(checkedListBox1.Items.ToString());
  8. }
  9. }

16. 反向选择checkedListBox1的选项

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. if (checkedListBox1.GetItemChecked(i))
  4. {
  5. checkedListBox1.SetItemChecked(i, false);
  6. }
  7. else
  8. {
  9. checkedListBox1.SetItemChecked(i, true);
  10. }
  11. }

17. checkedListBox1中选定的项->checkedListBox2

  1. for (int i = 0; i < checkedListBox1.CheckedItems.Count; i++)
  2. {
  3. checkedListBox2.Items.Add(this.checkedListBox1.CheckedItems);
  4. //remove是除去一个具体的值,不是index,注意了
  5. this.checkedListBox1.Items.Remove(
  6. this.checkedListBox1.CheckedItems);
  7. }

18. 绑定数据

  1. checkedListBox1.DataSource = dt;
  2. checkedListBox1.DisplayMember = "item";
  3. checkedListBox1.ValueMember = "code";
  4. //这个属性在checklistbox里是没有的,但是可以直接使用

19.

  1. for (int i = 0; i < checkedListBox1.Items.Count; i++)
  2. {
  3. if (checkedListBox1.GetItemChecked(i))
  4. {
  5. checkedListBox1.SelectedIndex = i;
  6. //利用SelectedValue取得Value值时,只能取得当前焦点项的值。所以要对整个CheckedListBox中的所有勾选项,让其都做一次焦点项才能取得所有勾选的项的值。
  7. str+= checkedListBox1.SelectedValue;
  8. }
  9. }

20.

CheckedlistBox控件比较有用到两个属性分别为:

  • CheckOnClickTrue:表示单击就选中当前行,为False :要点两下才可以选中。(默认值为False)。
  • ThreeDCheckBoxesTrue:表示三维的选中标记,为False:表示表面的显示标记。(默认值为False)。

问题

但是,在得到value值时出现了有点问题。 由于我是在selectedindexchanges时触发读取value事件,导致在循环焦点项时发生无限循环的异常。 于是用了比较传统的手法来解决这个问题。 将所要得到的字符串定义成全局变量,在高亮处时判断是否被选中,选中则加上该value值,没有选中则替换掉该value值。
  1. /*
  2. * 先修改checkonclick属性值,使得控件在单击时选中
  3. */
  4. string s = string.Empty;
  5. private void clbParameter_SelectedIndexChanged(object sender, EventArgs e)
  6. {
  7. // checkList.Clear();
  8. QuotaModel Quota = new QuotaModel();
  9. string ParameterText = "";//value值
  10. string ParameterRowCol = "";//参数值
  11. //string name=this.clbParameter.SelectedItem.ToString();
  12. string name = this.clbParameter.Text;//当前checklistbox高亮文本值
  13. string ParameterValue = string.Empty;
  14. ParameterValue = this.clbParameter.SelectedValue.ToString();//当前checklistbox高亮value值
  15. if (QuotaListCheck != null)
  16. {
  17. foreach (QuotaModel model in QuotaListCheck)
  18. {
  19. //获取行与列值
  20. if (model.Quota_Id == ParameterValue)
  21. {
  22. Quota.Formext_Row = model.Formext_Row;
  23. Quota.Formext_Col = model.Formext_Col;
  24. ParameterRowCol = "${" + Quota.Formext_Col + Quota.Formext_Row + "}";
  25. }
  26. }
  27. }
  28. //选项状态改变时遍历判断是否被选中
  29. for (int i = 0; i < clbParameter.Items.Count; i++)
  30. {
  31. string ItemName = string.Empty;
  32. ItemName = this.clbParameter.GetItemText(this.clbParameter.Items[i]);
  33. if (clbParameter.GetItemChecked(i))
  34. {
  35. if (ParameterText != "")
  36. {
  37. ParameterText = ParameterText + "+";
  38. }
  39. ParameterText += ItemName;
  40. if (name.Equals(ItemName))
  41. {
  42. if (s != "")
  43. {
  44. s += "+";
  45. }
  46. s += ParameterRowCol;
  47. }
  48. }
  49. else
  50. {
  51. if (name.Equals(ItemName))
  52. {
  53. int index = s.IndexOf(ParameterRowCol);
  54. //if (s.Contains("+"))
  55. if (index == 0) //判断读取到的value值是否是在字符串的第一位
  56. { //若是第一位,判断后续是否还有其他字符
  57. if (s.Contains("+")) //若有其他字符,连同后面的“+”号一块替换
  58. {
  59. ParameterRowCol += "+";
  60. }
  61. }
  62. else
  63. { //如果不是在第一位,则删除该字符与之前的“+”号
  64. ParameterRowCol = "+" + ParameterRowCol;
  65. }
  66. if (ParameterRowCol != "")
  67. {
  68. s = s.Replace(ParameterRowCol, "");
  69. }
  70. }
  71. }
  72. }
  73. this.txtCheckValue.Text = ParameterText;
  74. this.txtCheckParameter.Text = s;
  75. }