在.net中用CheckBoxList实现单选

在.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;
}

时间: 2014-02-10

基于MVC3方式实现下拉列表联动(JQuery)

上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传统的HTML方式比较简单,实际上基于MVC的实现方式也大同小异. 直接上代码: 复制代码 代码如下: public class DP_Provice { public int proviceID { get; set; } public string ProviceName { get; set;

详解ASP.NET MVC之下拉框绑定四种方式

前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC中下拉框中绑定枚举的几种方式. 话题引入 一般在下拉框中绑定数据的话,分为几种情况. (1)下拉框中的数据是写死的,我们直接给出死代码即可. (2)下拉框中的数据从数据库中读取出来,从而进行显示. (3)下拉框中直接用枚举显示. (4)下拉框中一个选择的值改变另外一个下拉框中的值. 关于下拉框中绑定

asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法

一.非强类型: Controller: ViewData["AreId"] = from a in rp.GetArea()                                select new SelectListItem {                                Text=a.AreaName,                                Value=a.AreaId.ToString()                   

asp.net 实现下拉框只读功能

复制代码 代码如下: <HTML> <HEAD> <TITLE>下拉框模拟只读</TITLE> <script type="text/javascript"> //根据下拉框ID设置下拉框只读 function setReadOnly(obj_id){ var obj = document.getElementById(obj_id); obj.onmouseover = function(){ obj.setCapture(

MVC5下拉框绑定的方法(单选)

本文实例为大家分享了MVC5下拉框单选绑定的具体代码,供大家参考,具体内容如下 1.Model [Display(Name = "学历")] public ICollection<System.Web.Mvc.SelectListItem> asdflist{ get; set; } //下拉框的类型 [Display(Name = "学历")] [Required] public int asdf { get; set; } //学历这个字段的属性 2

MVC实现下拉框联动效果(单选)

下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的属性,joblist是职位下拉框的属性,下拉框绑定请参照前文 @using (Html.BeginForm("aaai003sch", "aaa", FormMethod.Post, new { @class = "form-horizontal",

ASP.NET MVC下拉框联动实例解析

两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上           这里,我打算实现的需求是:有两个DropDownList,一个默认加载所有的省份数据,然后,当我选择省份的时候,把对应的市的数据,绑定到另外一个DropDownList上面,即实现了联动. 好了,这里不打算使用EF了,换用ADO.NET.首先新建好数据库,表: USE master GO IF EXISTS (SELECT * FROM sysdata

ASP.NET中DropDownList下拉框列表控件绑定数据的4种方法

DropDownList Web 服务器控件使用户能够从预定义的列表中选择一项.它与 ListBox Web 服务器控件的不同之处在于,其项列表在用户单击下拉按钮之前一直处于隐藏状态.另外,DropDownList 控件与 ListBox 控件的不同之处还在于它不支持多重选择模式. DropDownList在html中的呈现对应的是select,下面让我们来看一下DropDownList绑定数据的几种方法. 一.把Array数组绑到DropDownList 复制代码 代码如下: string[]

asp.net中js+jquery添加下拉框值和后台获取示例

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type

asp.net 自制的单选、多选列表实现代码

问:为什么要"自制"?不是有现成的控件吗? 答:在ASP.NET的页面上,ListBox最终是渲染成select元素,而CheckListBox最终被渲染成div或者是table,使得二者的样式无法统一,或者说要统一很麻烦. 解决: 于是,决定干脆自行组合一些元素,实现单选列表.多选列表的统一样式. 首先,无论是单选列表还是多选列表,都用一个有边框的div来做容器: <div class="list"></div> 然后,在这个div中添加数

asp.net listbox实现单选全选取消

前台 复制代码 代码如下: <head runat="server"> <title>部门多选</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="C#"> <meta nam

js select多选列表传值代码

js select /*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } if(oLeft.selectedIndex==-1) { oLeft.selectedIndex=0; } for(var i=0;i0) { oSelect.remove(ops.le

asp实现本周的一周时间列表的代码

复制代码 代码如下: td=date() '此次为设置当前日期,主要是为了调试方便,实际应用中可以使用当天日期.. str="一二三四五六日" '生成具体是周几的串,根据位置来取就可以了.. for x=1 to 7 '这个循环主要是判断是最近的周一是哪天就可以了... if td-weekday(td)+1+x=td then '这个判断是要让当前日期显示红色,没什么特别的价值.. response.write "<font color=red>周"&

iOS tableView实现单选和多选的实例代码

今天在项目中遇到了tableView的单选需求,现在总结一下,用一个简单的demo实现了简单的单选和多选两个功能.先看下效果图: 1:首先实现下单选 1:使用一个变量记录选中的行 @property (assign, nonatomic) NSIndexPath *selIndex; //单选选中的行 2:设置tableView数据,共2组,每组10行, - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { ret

基于jQuery下拉选择框插件支持单选多选功能代码

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

ReactJS实现表单的单选多选和反选的示例

本文介绍了ReactJS实现表单的单选多选和反选的示例,分享给大家,希望对大家有所帮助. 需求是对列表实现单选,反选和多选,全部清除的操作 ...... this.state = { //初始化空数组,表示已经选择的 selectedStores:[], } ...... handleClick(e){ const newSelection = e.target.value;//拿到点击的具体一项 let newSelectionArray;//新建一个空数组 //判断点击项是否为选择状态,是的

RecyclerView实现流式标签单选多选功能

RecyclerView简介 RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足.其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动).接下来讲解RecyclerView的用法. RecyclerView 基本用法 因为RecyclerView属于新增的控件,Android将RecyclerView定义在support库里.若要使用RecyclerView,第一步是要在build.g

C#列表框、复选列表框、组合框的用法实例

本文实例讲述了C#列表框.复选列表框.组合框的用法.分享给大家供大家参考.具体分析如下: 功能实现效果如下图所示: 实现代码: 1.声明相关变量存储专业.课程设置及相关信息: 复制代码 代码如下: string gr, msg, xy; string[] spec, cour1, cour2, cour3, cour4, cour5; 2.在Form1类中自定义函数bool checkGR()检查学生信息: 复制代码 代码如下: private bool checkGR() {     bool

Android实现单选与多选对话框的代码

android开发中实现单选与多选对话框的代码非常简单,具体代码如下所示: public void myClick(View view) { // 单选对话框 //singleCheckDialog(); // 多选对话框 mulCheckDialog(); } private void mulCheckDialog() { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("标题"