CheckBoxList 和 DropDownList 的二级联动

JS CheckboxList事件处理
本文探讨了使用JavaScript处理CheckBoxList事件中遇到的问题及解决方案,包括如何正确为动态生成的CheckBox挂载点击事件以及如何准确获取CheckBox的文本和值。
<scriptlanguage="javascript"type="text/javascript">
<!--
//添加CheckBoxList事件
functionaddAffair()
...{
varcheckList=document.getElementById("cblTeamPerson");
varchildrens=checkList.getElementsByTagName("input");
varcount=childrens.length;
if(count==0)
return;

varcheckBox;
varcheckBoxid;
for(vari=0;i<count;i++)
...{
checkBoxid
="cblTeamPerson_"+i;
checkBox
=document.getElementById(checkBoxid);
checkBox.onclick
=function(ev)
...{
checkedAffair((ev
||window.event).srcElement||ev.currentTarget);
}

}

}


//添加CheckBox的onclick事件
functioncheckedAffair(checkBoxID)
...{
varcheckBox=document.getElementById(checkBoxID.id);
vardropDownList=document.getElementById("ddlTeamLeader");
if(checkBox.checked==true)
...{
varnewOption=document.createElement("OPTION");
newOption.text
=getText(checkBox.id);
newOption.value
=getValue(checkBox.id);
dropDownList.options.add(newOption);
}

elseif(checkBox.checked==false)
...{
varstrValue=getValue(checkBox.id);
varcount=dropDownList.options.length;
varchildren;

for(vari=0;i<count;i++)
...{
children
=dropDownList.options[i].value;
if(children==strValue)
...{
dropDownList.options.remove(i);
}

}

}

}


//Gettheevent.onclickText
functiongetText(checkBoxID)
...{
varcheckBoxList=document.getElementById("cblTeamPerson");
varcheckbox=checkBoxList.getElementsByTagName("input");
varindex=getValue(checkBoxID);
varintIndex=parseInt(index);

alert(checkbox[index].nextSibling.innerHTML);

varvalue=checkbox[index].nextSibling.innerHTML;
returnvalue;
}


//Gettheevent.onclickValue
functiongetValue(checkBoxID)
...{
varcheckBox=document.getElementById(checkBoxID);
varfactLength=checkBox.id.length;
if(factLength==15)
...{
returncheckBox.id.substring(14,15);
}

else
...{
returncheckBox.id.substring(14,16);
}

}

//-->
</script>

遇到的2个比较严重的问题

1、在addAffair()时,页面生成后给客户端生成的单一的checkbox挂onclick事件,如果直接写成

checkBox.onclick = checkedAffair();是不响应的,这是在调用函数,应该

checkBox.onclick = function(ev) { 函数 }

2、getText(),取不到checkbox的Text,Value貌似确实取不到,改用获取checkbox的ClientID的尾数来记录value的办法,但是getElementById,取到的只是“on”,后来又想根据getElementsByTagName("input")得到checked的index,但是返回的值是undefind,后来又想通过CheckBoxList生成的<table>,用DOM模型来取,依然找不到

解决办法 var value = checkbox[index].nextSibling.innerHTML;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值