JavaScript控制checkbox全选，以及获取checkbox文本

这里考虑的是.net服务器控件checkbox或checkboxList；

 

假设页面如下，chkDepart是部门，chkPeople是所属部门的人员

<div style="text-align: center" mce_style="text-align: center" width="95%" class="tab"> <asp:DataList ID="DataList1" runat="server" Width="100%" RepeatDirection="vertical" OnItemDataBound="DataList1_ItemDataBound" GridLines="Horizontal" RepeatLayout="table"> <ItemTemplate> <tr> <td> <asp:CheckBox ID="chkDepart" runat="server" Text="" /></td> </tr> <tr> <td style="text-align: left" mce_style="text-align: left" nowrap="nowrap"> <asp:CheckBoxList RepeatDirection="horizontal" RepeatLayout="table" nowrap="nowrap" ID="cblPeople" runat="server" /></td> </tr> </ItemTemplate> <ItemStyle HorizontalAlign="Left" /> </asp:DataList> </div>

 

设置全选或全不选

function onDepartSelect(chk,iid) { var p=chk;var v=0; for(var fld=0;fld<document.form1.elements.length;fld++) { var elt=document.form1.elements[fld]; if(elt.type=="checkbox" && elt.id.indexOf(iid)>-1) { elt.checked=chk.checked; } } }

 

获取所选checkbox的Text

由于checkbox生产的html代码是用label来显示其文本，并且以"for"属性的值和checkbox的id对应，因此可以用

var lbs=document.getElementsByTagName获取所有label，再根据lbs[i].getAttributeNode("for").value来判断是否为所属checkbox的id，就可以获取对应checkbox的Text了。

 

var selectedCheckboxText=""; for(var fld=0;fld<document.form1.elements.length;fld++) { var elt=document.form1.elements[fld]; if(elt.type=="checkbox" &&elt.checked && elt.id.indexOf("Dep")==-1) { var lbs=document.getElementsByTagName("label"); for(var lbt=0;lbt<lbs.length;lbt++) { if(lbs[lbt].getAttributeNode("for").value==elt.id) // if(document.all(elt.id).tagName.toLowerCase()=="label") selectedCheckboxText+= lbs[lbt].innerText+","; } } }  

 

c#代码：在datalist绑定事件中

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e) { DataRowView drv = e.Item.DataItem as DataRowView; CheckBox chkDep= e.Item.FindControl("chkDepart") as CheckBox; chkDep.ID = "Dep"; CheckBoxList cbl = e.Item.FindControl("cblPeople") as CheckBoxList; if (cbl != null) { dvUser.RowFilter="order_id='"+drv["DepartID"].ToString()+"'"; cbl.DataSource = dvUser; cbl.DataTextField = "User_Name"; cbl.DataValueField = "User_Name"; cbl.DataBind(); cbl.ID = drv["DepartID"].ToString(); //标识复选框的id,来确定所属的部门 } if (chkDep != null) { chkDep.Text = drv["Depart_Name"].ToString(); chkDep.Attributes.Add("onclick", string.Format("javascript:onDepartSelect(this,{0})", drv["DepartID"].ToString())); } }