关于asp.net里checkboxlist用JS获取不到value值的解决方法
页面上有个服务器控件checkboxlist,想要获取选中的value值,
var chkObject = document.getElementById('<%=chkProjStatus.ClientID%>');
var chkInput =chkObject.getElementsByTagName("INPUT");
for(var i=0;i<chkInput.length;i++)
{
if(chkInput[i].checked)
{
alert(chkInput[i].value);
}
}
发现按上面的方法是取不到的, 由于checkboxlist在前台html页面表现中没有value属性,导致js无法获取选种的value值
须用程序来添加value和text属性,还是给个实际的dome吧 ,新建一个xx.aspx页面,cs文件代码如下
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindChkList();
}
}
/// <summary>
/// 绑定复选框
/// </summary>
private void BindChkList()
{
chkProjStatus.Items.Add(new ListItem("项目前期", "505004"));
chkProjStatus.Items.Add(new ListItem("项目进行中", "505001"));
chkProjStatus.Items.Add(new ListItem("项目中期", "505003"));
chkProjStatus.Items.Add(new ListItem("项目后期", "505005"));
chkProjStatus.Items.Add(new ListItem("项目结束", "505002"));
chkProjStatus.Items.Add(new ListItem("项目意外中止", "505006"));//这里您可以绑定数据库里的数据
string checkListValue = "";
string checkListText = "";
for (int i = 0; i < chkProjStatus.Items.Count; i++)
{
checkListValue += chkProjStatus.Items[i].Value + ",";
checkListText += chkProjStatus.Items[i].Text + ",";
}
checkListText = checkListText.TrimEnd(',');
checkListValue = checkListValue.TrimEnd(',');
//由于checkboxlist在前台html页面表现中没有value属性,导致js无法获取选种的value值
//这里用程序来添加value和text属性
chkProjStatus.Attributes["ListValue"] = checkListValue;
chkProjStatus.Attributes["ListText"] = checkListText;
}
aspx页面的js脚本这样来:
function CheckValue()
{
//在JS端调用CheckBoxList
var chkObject = document.getElementById('<%=chkProjStatus.ClientID%>');
var chkInput =chkObject.getElementsByTagName("INPUT");
var arrListValue = chkObject.ListValue.split(',');
var count = arrListValue.length;
var strCheckChecked = "";
var arrCheckChecked;
var chkValue = "";
//每次点击CheckBoxList的一个Item,都循环把所有Item的选中状态按0、1标志,存入一个变量,最后再根据这个标志来决定checkboxlist中要取的值
for (var i=0; i< chkInput.length; i++)
{
if(chkInput[i].checked)
{
strCheckChecked = strCheckChecked + "1" + ",";
}
else
{
strCheckChecked = strCheckChecked + "0" + ",";
}
}
arrCheckChecked = RTrim(strCheckChecked).split(',');
for(var j = 0; j < count; j++)
{
if(arrCheckChecked[j] == "1")
{
chkValue += arrListValue[j] +",";
}
}
chkValue = RTrim(chkValue);
alert(chkValue);
}
//如果有则移除末尾的逗号
function RTrim(str)
{
if(str.charAt(str.length-1)==",")
return str.substring(0,str.length-1);
else
return str;
}
OK,这样就搞定了:) 但是似乎不支持火狐浏览器。
可以用第二个办法:
直接输出<input id=\"Texx_BiaoQian_" + i + "\" onclick=\"BiaoQian('" + i + "','" + RecordList.Rows[i]["B_SN"].ToString() + "','1')\" type=\"checkbox\" />
BiaoQianSN.Append("<input type=\"hidden\" id=\"Texx_BiaoQian\" />");
然后调用js去做判断
function BiaoQian(ID,B_SN)//第几个标签,选中的值得
{
if(document.getElementById("Texx_BiaoQian_" + ID).checked)//如果选中
{
document.getElementById("Texx_BiaoQian").value += B_SN + ",";
}
else
{
var reg=new RegExp(B_SN+",",""); //创建正则RegExp对象
var stringObj=document.getElementById("Texx_BiaoQian").value;
var newstr=stringObj.replace(reg,"");
document.getElementById("Texx_BiaoQian").value = newstr;
}
}
最后获得document.getElementById("Texx_BiaoQian").value 的值就是想要的值了。
//判断是否选择了最少一项,可用
var xz = 0;
$('#Texx_yd_TianJingZiXiang input[type="checkbox"]:checked').each(function () {
xz++;
});
if (xz == 0)
{
alert('请选择拟报名田径类子项');
return;
}
//判断是否选择了最少一项,可用

浙公网安备 33010602011771号