在.net中用CheckBoxList实现单选
更新时间:2021年9月22日 10:12 点击:2198
在.net中提供了Radiobuttonlist来实现单选的,但是我一直喜欢用CheckBoxList 原因我觉得CheckBoxList 控件页面展示效果要好看一些,呵呵
这里是先CheckBoxList 实现单选采用了控件的点击事件 调用js来控制单选的
例如页面如下:
<asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>
</asp:CheckBoxList>
这里是调用的js
原理就是:
1、获得页面控件集合,循环查找check
2、设置check 为false ,再将传入的控件设置选中
function CheckBoxList_Click(sender)
{
var container = sender.parentNode;
if(container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局(默认设置),否则使用流布局
container = container.parentNode.parentNode; // 层次: <table><tr><td><input />
}
var chkList = container.getElementsByTagName("input");
var senderState = sender.checked;
for(var i=0; i<chkList.length;i++) {
chkList[i].checked = false;
}
sender.checked = senderState;
}
这里是先CheckBoxList 实现单选采用了控件的点击事件 调用js来控制单选的
例如页面如下:
复制代码 代码如下:
<asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>
</asp:CheckBoxList>
这里是调用的js
原理就是:
1、获得页面控件集合,循环查找check
2、设置check 为false ,再将传入的控件设置选中
复制代码 代码如下:
function CheckBoxList_Click(sender)
{
var container = sender.parentNode;
if(container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局(默认设置),否则使用流布局
container = container.parentNode.parentNode; // 层次: <table><tr><td><input />
}
var chkList = container.getElementsByTagName("input");
var senderState = sender.checked;
for(var i=0; i<chkList.length;i++) {
chkList[i].checked = false;
}
sender.checked = senderState;
}
相关文章
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
ASP.NET中CheckBoxList复选框列表控件详细使用方法
本文主要介绍CheckBoxList几种常见的用法,并做出范例演示供大家参考,希望对学习asp.net的朋友有所帮助。...2021-09-22- gridview和checkboxlist的嵌套使用,会有效的提高开发的效率,不过很多的童鞋们对此还是很陌生的,接下来将帮助童鞋们实现gridview和checkboxlist的嵌套使用,感兴趣的朋友可以了解下,或许对你有所帮助...2021-09-22
- 用CheckBoxList实现单选的原因是我觉得CheckBoxList控件页面展示效果要好看一些,需要的朋友可以参考下...2021-09-22
ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法
这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式...2021-09-22Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行
Gridview使用CheckBox单选与全选功能再次进行简单演示,选中的行,使用高亮显示,让用户一目了然看到哪一行被选择了,在项目中很实用的,开发中的朋友们可要考虑一下哦...2021-09-22- 这篇文章主要为大家详细介绍了小程序实现自定义多层级单选和多选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-21
如何为CheckBoxList和RadioButtonList添加滚动条
这篇文章主要介绍了为CheckBoxList和RadioButtonList添加滚动条的方法,感兴趣的小伙伴们可以参考一下...2021-09-22实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上
一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样有演示动画,感兴趣的朋友可以了解下啊...2021-09-22- 这篇文章主要为大家详细介绍了MVC5下拉框绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
ASP.NET中用js取CheckBoxList中值的方法实例
用脚本取CheckBoxList中的值,并用"|"将其分开,之后将取到的值放入文本框,返回数据库做添加或者修改...2021-09-22- 开发要求,原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求,这个CheckBoxList控件限制只能单选,很多新手朋友可能不知从何下手,为此本文的出现时有必要的了,有需要的朋友可以了解此文...2021-09-22
- 这篇文章主要介绍了asp.net listbox单选全选取消的应用,需要的朋友可以参考下...2021-09-22
通过RadioButton对DataList控件进行单选实例说明
本例实现通过RadioButton对DataList控件进行单选,aspx拉一个DataList控件,把RadioButton置于DataList的ItemTemplate模版内;在.aspx.cs内为DataList控件绑定数据,很实用的功能,感兴趣的朋友可以了解下啊...2021-09-22- 这篇文章主要为大家详细介绍了Asp.net自定义控件之单选、多选控件的相关资料,感兴趣的小伙伴们可以参考一下...2021-09-22
- radiobutton可以单选,于是想让gridview也可以实现,具体的思路及代码如下,感兴趣的朋友可以参考下...2021-09-22
Asp.net 中使用GridView控件实现Checkbox单选
在GridView控件中,第0列有放一个CheckBox控件,现想实现对CheckBox进行单选,怎么实现呢?下面小编通过本文给大家分享Asp.net 中使用GridView控件实现Checkbox单选功能,一起看看吧...2021-09-22asp.net CheckBoxList各项最小宽度CSS样式(兼容性good)
ASP.NET中,CheckBoxList里的选择都是自动宽度的,属性时没有设置各项宽度的设置,在IE10、遨游4极速模式及兼容模式下均可正确显示最小宽度,此样式除了用于CheckBoxList外,也可用于DIV等...2021-09-22- CheckBoxList两列并排的显示效果相比大家都有见到过吧,下面是具体的实现代码,感兴趣的朋友可以参考下哈...2021-09-22