概述:在asp.net中的使用dategrid,在dategrid中添加复选框并实现复选框checkbox的单选功能,在选择的过程中,通过点击复选框能够触发事件,比如,点击复选框checkbox时,在textbox中显示选中的值等等。
功能一:复选框checkbox单选:
借助js实现。
步骤一:添加复选框checkbox列;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <asp:TemplateColumn> 2 <ItemTemplate> 3 <asp:CheckBox ID="chkSelect" runat="server"> 4 </asp:CheckBox> 5 </ItemTemplate> 6 </asp:TemplateColumn>
步骤二:将如下js代码放到前台界面;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script language="javascript" type="text/javascript"> 2 function SetCheckBoxState() {//复选框单选 3 var dom = document.all; 4 var el = event.srcElement; 5 if (el.tagName == "INPUT" && el.type.toLowerCase() == "checkbox") { 6 for (i = 0; i < dom.length; i++) { 7 if (dom[i].tagName == "INPUT" && dom[i].type.toLowerCase() == "checkbox") { 8 dom[i].checked = false; 9 } 10 } 11 } 12 el.checked = !el.checked; 13 } 14 </script>
步骤三:
在ItemDataBound事件中将js方法添加到复选框checkbox上;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 protected void gridPlan_ItemDataBound(object sender, DataGridItemEventArgs e) 2 { 3 CheckBox chkSelect; 4 chkSelect = (CheckBox)e.Item.FindControl("chkSelect"); 5 chkSelect.Attributes.Add("OnClick", "SetCheckBoxState()"); 6 }
通过上述三步,即可实现复选框checkbox的单选功能。
功能二:单选框checkbox事件:
步骤一:在前台checkbox中添加如下代码:
就是添加AutoPostBack="True" OnCheckedChanged="TranChecked"两个属性。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <asp:CheckBox ID="chkSelect" AutoPostBack="True" OnCheckedChanged="TranChecked" runat="server"></asp:CheckBox></ItemTemplate>
在后台添加如下代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 protected void TranChecked(object sender, EventArgs e) 2 { 3 。。。想要实现的功能 4 5 }
通过上述两步即可实现复选框checkbox事件。
以上功能,是本人在工作中需要实现的功能,通过不断的尝试最终成功实现,如果你有更好的方法或者我的实现存在问题,欢迎指教!