`
wang_zhi_peng2007
  • 浏览: 251813 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

提交一组中选中的checkbox方法

 
阅读更多

复选框提交javaScript实现

 1、实现思想:当单击提交的时候,触发一个onclick事件,将checkbox为选中状态的每条记录的参数都添加到那个指定的form中,然后提交这个form表单。

 2、实现代码: 

<body>
    <form action="../indent/addIndent.do" name="frmPage" method="post">
    <table>
    	<tr>
    		<td></td>
    		<td>编号</td>
    		<td>商品名</td>
    		<td>商品价格</td>
    		<td>数量</td>
    		<td>备注</td>
    	</tr>
    	<tr>
    		<td><input type="checkbox" name="isSelect" value="1"/></td>
    		<td><input type="text" name="isSelect" value="HD123"/></td>
    		<td><input type="text" name="name" value="手机"/></td>
    		<td><input type="text" name="price" value="1234"/></td>
    		<td><input type="text" name="count" value="20"/></td>
    		<td><input type="text" name="mark" value="你好"/></td>
    	</tr>
    	<tr>
    		<td><input type="checkbox" name="isSelect" value="1"/></td>
    		<td><input type="text" name="isSelect" value="HD123"/></td>
    		<td><input type="text" name="name" value="手机"/></td>
    		<td><input type="text" name="price" value="1234"/></td>
    		<td><input type="text" name="count" value="20"/></td>
    		<td><input type="text" name="mark" value="你好"/></td>
    	</tr>
    	<tr>
    		<td><input type="checkbox" name="isSelect" value="1"/></td>
    		<td><input type="text" name="isSelect" value="HD123"/></td>
    		<td><input type="text" name="name" value="手机"/></td>
    		<td><input type="text" name="price" value="1234"/></td>
    		<td><input type="text" name="count" value="20"/></td>
    		<td><input type="text" name="mark" value="你好"/></td>
    	</tr>
    </table>
    <input type="button" name="submit1" value="提  交" onclick="changeValue();"/>
    </form>
    <form action="../indent/addIndent.do" name="frm" method="post">
    
    </form>
    <script type="text/javascript">
    	function changeValue(){
    		//清空名为frm的form的内容
    		$("form[name=frm]").empty();
    		//获得名称为isSelect的所有checkbox
    		var check = $(input[name=isSelect]);
    		var name = document.getElementsByName("name");
    		var price = document.getElementsByName("price");
    		var count = document.getElementsByName("count");
    		var mark = document.getElementsByName("mark");
    		var i=0;
    		var str="";
    		//循环每条记录
    		check.each({
    			//选出checkbox为选中状态的
    			if($(this).attr("checked")==true){
    				//将每个参数都添加到frm这个form中
    				str += "<input type='hidden' name='name' value='"+name[i].value+"'>";
    				str += "<input type='hidden' name='price' value='"+price[i].value+"'>";
    				str += "<input type='hidden' name='count' value='"+count[i].value+"'>";
    				str += "<input type='hidden' name='mark' value='"+mark[i].value+"'>";
    				$("form[name=frm]").append(str);
    			}
    			i++;
    		});
    		$("form[name=frm]").submit();
    	}
    </script>
  </body>

 

分享到:
评论

相关推荐

    checkbox全选,选中数据传到后台

    在IT行业中,尤其是在Web开发领域,"checkbox全选,选中数据传到后台"是一个常见的功能需求。这个功能主要用于用户批量处理数据,如删除、修改等。以下是对这个主题的详细解析: 首先,我们需要理解标题中的关键词...

    html5 css3制作checkbox多选框选中样式特效

    `name`属性用于在提交表单时识别一组相关的复选框。 接下来,我们使用CSS3来定制这些复选框的样式。由于浏览器的安全策略,直接修改`&lt;input type="checkbox"&gt;`的样式受到限制,所以我们通常会借助`checkbox`旁边的`...

    获取checkboxlist选中的value和text

    在Web开发中,尤其是使用ASP.NET技术时,`CheckBoxList`控件经常被用来呈现一组可多选的选项。在用户界面中,用户可以勾选他们感兴趣的选项,然后提交表单。开发人员需要获取这些选中的选项的值(`value`)和文本(`...

    checkbox的全选与取消

    这里的`id`属性用于唯一标识该复选框,`name`属性则用于在表单提交时标识一组相关的复选框。 全选功能通常是通过一个主复选框来实现的,当用户点击这个主复选框时,所有相关的子复选框会被自动选中或取消。这需要...

    checkbox复选框传值

    每个复选框都有一个`name`属性,用于标识一组相关的选择。例如: ```html &lt;input type="checkbox" name="interests" value="music"&gt; &lt;input type="checkbox" name="interests" value="sports"&gt; &lt;input type="...

    table中checkbox取值

    在 JavaScript 中,我们可以通过 `document.getElementById()` 或 `document.getElementsByName()` 来获取单个或一组复选框。然后,通过 `checked` 属性检查复选框是否被选中。 ```javascript // 获取单个复选框的...

    CheckBox控件默认选中,提交时永远获得选中状态的实现代码

    CheckBox(复选框)允许用户从一组选项中选择一个或多个选项。在HTML中,CheckBox控件通常是由`&lt;input type="checkbox"&gt;`标签来定义的。而在服务器端编程语言中,例如***,CheckBox控件通常是一个服务器控件,可以...

    ASP.NET 中Checkboxlist添加到数据库代码案例

    `CheckBoxList` 是 ASP.NET 提供的一种服务器控件,用于显示一组复选框。每个复选框都是一个单独的项,这些项可以预先被设置为选中或未选中状态。通过使用 `CheckBoxList` 控件,用户可以选择其中的一个或多个选项。...

    JS控制checkboxJS控制checkboxJS控制checkbox

    有时,我们希望一组checkbox中只能选中一个。这可以通过监听`change`事件,并取消其他checkbox的选中状态来实现: ```javascript var exclusiveGroup = document.querySelectorAll('.exclusiveCheckbox'); ...

    jsp中checkbox用法详解.docx

    其中`name`属性用于标识该Checkbox属于哪个组,而`value`属性则表示当Checkbox被选中时所提交的值。在JSP中可以直接使用上述HTML语法来创建Checkbox。 #### 三、Checkbox与JSP的结合 在JSP环境中,我们可以利用JSP...

    Android Expandablelistview +CheckBox

    在`ExpandableListView`中,数据通常以`ExpandableListAdapter`的形式存在,它包含两部分:一组数据(Group)和每个组内的一系列子数据(Child)。我们可以创建两个类,一个表示组(Group),另一个表示子项(Child...

    H5中点击checkbox动态显示table

    在H5页面中,"点击checkbox动态显示table"是一个常见的交互功能,特别是在B2B(Business to Business)场景下,例如模拟淘宝店家定义商品的SKU(Stock Keeping Unit,库存量单位)设置。这个功能允许用户通过勾选...

    checkbox.js

    2. **联动效果**:在多组Checkbox之间,`checkbox.js`可以通过编程方式实现联动效果,比如当一组全选时,另一组自动全不选,反之亦然。 3. **异步数据加载**:如果Checkbox的数据是动态加载的,`checkbox.js`也能很...

    Java后台获取JSP页面多个复选框选中的值

    所有复选框共享同一个"name"属性,这样当表单提交时,服务器就能知道这些值是属于同一组的。 在JSP页面中,我们可以使用JSTL(JavaServer Pages Standard Tag Library)或EL(Expression Language)来简化代码。...

    选中/取消选中CheckBoxList中的所有复选框

    在网页开发中,CheckBoxList控件经常用于呈现一组可选的多选选项。这个控件在ASP.NET框架中尤其常见,允许用户通过复选框来选择一个或多个项目。本篇将深入探讨如何使用JavaScript、C#、jQuery以及.NET相关的技术来...

    jquery判断至少有一个checkbox被选中的方法

    复选框允许用户从一组选项中选择多个选项,而在某些场景下,我们可能需要在至少有一个复选框被选中时才允许提交表单或执行某些操作。本文将介绍如何使用jQuery判断至少有一个checkbox被选中。 首先,需要明确的是,...

    Ext表单组件之checkbox

    如果需要一组互斥的复选框,可以使用`Ext.container.CheckboxGroup`,它允许用户从一组选项中选择一个。配置`columns`属性可以设置每行显示的复选框数量。 8. **响应式设计** 在移动设备上,复选框的布局可能需要...

    js判断checkbox是否选中个数的方法(超简单)

    `checkbox` 是HTML中的一个表单元素,允许用户在一组选项中选择多个选项。在JavaScript中,我们需要编写代码来判断这些`checkbox`是否被选中,并且统计选中的个数。本文将详细介绍一种超简单的JS方法来实现这个功能...

    Checkbox选定(支持多选)

    `Checkbox`是HTML表单控件之一,它允许用户在一组选项中进行多选。用户可以勾选或取消勾选每个选项,以表示他们的选择。在HTML中,`&lt;input&gt;`标签的`type="checkbox"`属性定义了`Checkbox`。 ### 2. HTML 结构 创建...

    Jquery遍历checkbox获取选中项value值的方法

    在jQuery中,遍历checkbox并获取选中项的value值是一项常见的操作,特别是在表单处理或者数据筛选场景中。在给定的标题和描述中,我们看到一个具体的示例,展示了如何实现这一功能。以下是对这个示例的详细解释: ...

Global site tag (gtag.js) - Google Analytics