<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="Jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#divDemo :checkbox").each(function() {
$(this).live("click", function() {
if (this.checked) {
alert("value:" + $(this).parent().attr("myValue") + "\n text:" + $(this).parent().text());
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divDemo">
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
CheckBoxList 控件,由于数据是在后台绑定的,所以,当前台通过js获取选中项的value值时,只会得到一个on值,控件的默认行为就是这样的。解决方案:在后台绑定数据源时,给每一个item都增加一个属性,用来保存value值,那么,这个自己保存的value属性值,在前台是可以通过js获取到的。
前台代码:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDemo();
}
}
private void BindDemo()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name",typeof(string));
dt.Columns.Add("Code",typeof(string));
DataRow row = dt.NewRow();
row[0] = "中国";
row[1] = "China";
dt.Rows.Add(row);
DataRow row1 = dt.NewRow();
row1[0] = "美国";
row1[1] = "America";
dt.Rows.Add(row1);
DataRow row2 = dt.NewRow();
row2[0] = "俄罗斯";
row2[1] = "Russia";
dt.Rows.Add(row2);
ListItem lt;
for (int i = 0; i < dt.Rows.Count; i++)
{
lt = new ListItem(dt.Rows[i][0].ToString(),dt.Rows[i][1].ToString());
lt.Attributes["text"] = dt.Rows[i][0].ToString();
lt.Attributes["myValue"] = dt.Rows[i][1].ToString();
this.CheckBoxList1.Items.Add(lt);
}
}
}