且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

MVC应用程序与多选列表(checkbox list)

更新时间:2022-03-17 02:40:53

原文:MVC应用程序与多选列表(checkbox list)

程序中,经常会使用checkbox lsit来呈现数。能让用户有多选项目。此博文Insus.NET练习的checkbox list相关各个功能,效果演示如下:
MVC应用程序与多选列表(checkbox list)


下面是实现过程,首先在MVC应用程序下,创建一个model:
MVC应用程序与多选列表(checkbox list)



新建一个实体Entity,作为checkbox list的数据源:
MVC应用程序与多选列表(checkbox list)

 

 创建视图方法与数据源在控制器:
MVC应用程序与多选列表(checkbox list)

 下面是创建一个视图:
MVC应用程序与多选列表(checkbox list)

 

一个Div标签,是用来动态加载checkbox list的,另外还是有8个铵钮,将来实现checkbox list相关的一些功能。

下面是引用jQuery与自定义方法函数js库:
MVC应用程序与多选列表(checkbox list)

 

现在我们可以根据上面写好的数据源,用jQuery来动态生成checkbox list了:
MVC应用程序与多选列表(checkbox list)



铵钮1事件,清除所有选中的选项,算得上是初始化。
MVC应用程序与多选列表(checkbox list)

铵钮2事件,获取选中选项的索引,它是从0开始计算。
MVC应用程序与多选列表(checkbox list)


铵钮3事件,是获取选中选项的键值。
MVC应用程序与多选列表(checkbox list)


铵钮4事件,是获取选中选项的文本。
MVC应用程序与多选列表(checkbox list)


铵钮5事件,是对checkbox list多选列表,进行全部选取。
MVC应用程序与多选列表(checkbox list)

 

铵钮6事件,是对多选列表的选项进行反选,选中的改变uncheck,而原本是uncheck的,改变为checked。
MVC应用程序与多选列表(checkbox list)


铵钮7事件,是对多选列表的选项,偶数选项为选中。
MVC应用程序与多选列表(checkbox list)



铵钮8事件:
MVC应用程序与多选列表(checkbox list)