转自:http://www.cnblogs.com/Fred_Xu/archive/2013/01/16/how-to-get-the-checkbox-value-from-a-dynamically-generated-checkbox-list-asp-net.html

前端页面需要有一个动态增加表格行的功能,引用了table.addrow.js这个jquery插件,每一行有一个checkbox,name统一为cbMaintainRatio,而鉴于这部分是一个纯Html Form的提交非用户控件,所以我们在后端使用Request.Form来获取值,但问题出来了:

 <table border=" class="atable">
             <tbody><tr class="evenRow">
                 <th>
                     width(px)
                 </th>
                 <th>
                     height(px)
                 </th>
                 <th>maintain ratio</th>
                 <th></th>
             </tr>
             <tr class="cloneRow9674 oddRow">
                 <td>
                     <input type=" name="imgwidth">
                 </td>
                 <td>
                     <input type=" name="imgheight">
                 </td>
                 <td>
                     <input type="checkbox" name="maintainratio">
                 </td>
                 <td class="btnCol">
                     <input type="button" value="Remove" class="delRow delRow9674" style="display: inline-block;">
                 </td>
             </tr><tr class="cloneRow9674 evenRow">
                 <td>
                     <input type=" name="imgwidth">
                 </td>
                 <td>
                     <input type=" name="imgheight">
                 </td>
                 <td>
                     <input type="checkbox" name="maintainratio">
                 </td>
                 <td class="btnCol">
                     <input type="button" value="Remove" class="delRow delRow9674" style="display: inline-block;">
                 </td>
             </tr><tr class="cloneRow9674 oddRow">
                 <td>
                     <input type=" name="imgwidth">
                 </td>
                 <td>
                     <input type=" name="imgheight">
                 </td>
                 <td>
                     <input type="checkbox" name="maintainratio">
                 </td>
                 <td class="btnCol">
                     <input type="button" value="Remove" class="delRow delRow9674" style="display: inline-block;">
                 </td>
             </tr>
             <tr class="evenRow">
             <td colspan="><input type="button" value="Add" class="alternativeRow addRow9674"></td>
             </tr>
         </tbody></table>

如果我们有多行表单,也就是有多个name为cbMaintainRatio的checkbox,post到后端的form,我们通过Request.Form["cbMaintainRatio"]只能获取到一个值"on",而不是像<input type="text" name="width" />这种获取到的"100,200,"值。

浏览了一遍addrow插件的文档,他竟然不支持event,好吧...那只能我们自己来改造代码了:

页面增加一个hidden input,目的为保存多个checkbox的值,如果选中则设定为true,否则false,然后用,分割赋值给这个hidden input

 function setMaintainRatio() {

var fields;
$("input[name='cbMaintainRatio']").each(function () {
var txt = $("input[name='cbMaintainRatioList']");
fields = ($("input[name='cbMaintainRatio']").map(function () {
if (this.checked)
return "1";
else
return "0";
}).get().join(","));

$(txt).val(fields);
});

        }

提交Form的按钮绑定上面这个js 方法:

  <asp:Button ID="btwImageCreate" runat="server" Text="Image Create" OnClick="btwImageCreate_Click" OnClientClick="setMaintainRatio(); return true" />
         <input type="hidden" name="cbMaintainRatioList" /> 

OK,这样我们就可以在后台代码通过Request.Form的形式获取到每一行这个name="cbMaintainRatio" checkbox的值了!

全部和已选择比较

  ; i < Model[].Count; i++)
                     {
                         bool c = false;
                         ; j < Model[].Count; j++)
                         {
                             ][j].ButtonID == Model[][i].ButtonID)
                             {
                                 c = true;
                                 break;
                             }

                         }
                         if (c)
                         {
                             <div class="check-box">

                                 <input name="btns" id="Model[0][i].ButtonID" checked="checked" class="input-text" type="checkbox" style="width: 100px" autocomplete="off" />

                                 <lable>Model[][i].Name</lable>
                             </div>
                         }
                         else
                         {
                             <div class="check-box">

                                 <input name="btns" id="Model[0][i].ButtonID" class="input-text" type="checkbox" style="width: 100px" autocomplete="off" />

                                 <lable>Model[][i].Name</lable>
                             </div>
                         }

                     }

通过Request.Form获取同name的checkbox所有值的更多相关文章

  1. request.getParameterMap() 获取表单提交的键值对 并且 也能获取动态表单的key

    Map<String,String[]> map = request.getParameterMap();Set<String> keys = map.keySet(); 获取 ...

  2. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  3. Js获取复选框checkbox的值

    var emps= $("input[name='emp']:checked"); var employee= ""; emps.each(function() ...

  4. Request.Form()的使用

    在CS文件中获得对应页面中的下拉框DropDownList_sitebranch值可以有以下几种方法获得:         siteInfo.FZJGID = DropDownList_sitebra ...

  5. ASP中 Request.Form中文乱码的解决方法

    分享下解决方法直接用request.Form()获取的是所有数据所以会有乱码(具体原因不祥) 用 VBScript code Foreach obj in Request.Form Response. ...

  6. [转载]Request、Request.Form和Request.QueryString的区别

    Request.Request.Form和Request.QueryString的区别 request本身是一个系统的静态对象,本身也可以作为数组调用,比如request("abc" ...

  7. Nancy获取Request.Form的所有参数

    Nancy是一个轻量级的webapi框架,在用Nancy框架的时候,我们经常要获取到接口的所有动态参数值, 但是Nancy的Request.Form不能够直接转成NameValueCollection ...

  8. 解决当FORM的ENCTYPE="multipart/form-data" 时request.getParameter()获取不到值的方法

    部分转载于: http://blog.csdn.net/georgejin/article/details/1706647 http://www.cnblogs.com/loveyunk/p/6089 ...

  9. 获取Request.Form所有内容

    string wwww = "";        for (int i = 0; i < Request.Form.Count; i++)        {          ...

随机推荐

  1. AngularJS 表格

    ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...

  2. Android root + 修改host

    1.使用KingRoot下载手机版,安装后进行Root处理. 2.下载 RE文件管理器,安装后,打开应用,进入etc,找到host, 勾选,菜单中选择 以文本方式编辑,修改好之后,按返回键 ,提示保存 ...

  3. java中定时器的四种方法

    package com.lid; import java.util.Calendar; import java.util.Date; import java.util.Timer; import ja ...

  4. 配置Tomcat使用https协议

    一.  创建tomcat证书 这里使用JDK自带的keytool工具来生成证书: 1. 在jdk的安装目录\bin\keytool.exe下打开keytool.exe 2. 在命令行中输入以下命令: ...

  5. HYSBZ 2957 分块

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2957 题意:中文题面 思路: 来自此博客 首先明确问题,对于每栋楼房的斜率K=H/X,问题 ...

  6. QuickTest Professionar 快捷键

    新建Test – New Test CTRL + N录制 – Record F3打开Test – Open Test CTRL + O新建业务组件 – Business Component > ...

  7. python操作mongodb数据库

    一.MongoDB 数据库操作 连接数据库 import pymongo conn = pymongo.Connection() # 连接本机数据库 conn = pymongo.Connection ...

  8. ACM:SCU 4437 Carries - 水题

    SCU 4437  Carries Time Limit:0MS     Memory Limit:0KB     64bit IO Format:%lld & %llu  Practice  ...

  9. Linux下面桌面的安装

    挂载光盘后配置yum文件,配置后 使用yum grouplist 命令 查看组 用yum install '"GNOM桌面组 输入 init 5   即可进入桌面模式 0 关机  3命令行级 ...

  10. javascript面向对象(一):封装

    本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...