`
Everyday都不同
  • 浏览: 723671 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

select多选和checkbox复选的值在js和action中的展现形式

    博客分类:
  • jsp
阅读更多

话不多说,例如在前端页面:

<body>
    <button type="button" class="btn btn-info" onclick="show()">测试</button>	
	<form action="/amp/test/query">
		<select multiple="true" name="fruits" id="select">
			<option value="a">苹果</option>
			<option value="b">香蕉</option>
			<option value="c">梨</option>
			<option value="d">葡萄</option>
		</select>
		
		<label><input name="sports"  type="checkbox" value="running"/>跑步</label>
		<label><input name="sports"  type="checkbox" value="swimming"/>游泳</label>
		<label><input name="sports"  type="checkbox" value="climbing"/>登山</label>
		
		<input type="submit" value="提交" />
	</form>

</body>

 我在后台写一个action接收提交的内容。

 

例如我选择苹果、香蕉、葡萄时,后台action接收到fruits的数据为:a,c,d;选择跑步、游泳时,后台接收到的sports的值为:running, swimming(即两者传给后台的都是用,连接的字符串);

测试前端接收到的值的js:

function show() {
			var val1 = $("#select").val();
			console.log("===select:" + val1);
			var val2 = $("input[name='sports']:checked").val();
			console.log("===checkbox:" + val2);
		}

 

而点击测试按钮是,degub前端会发现接收到select多选框的值是一个Array,[0]=a, [1]=b, [2]=d;而checkbox在前端的值为running(永远是数组第一个元素的值。),如果要获取选中的值必须循环 $("input[name='sports']:checked")这个对应的数组的每一个元素。

 

分享到:
评论

相关推荐

    JSP列表中复选框批量选择功能实现

    在JavaServer Pages (JSP) 开发中,常常需要实现用户界面中的批量选择功能,比如在列表中通过复选框来选中多个项目。本文将详细介绍如何在JSP中实现这样的功能,主要涉及HTML、JavaScript 和后端Java的交互。 首先...

    对 Struts 2 的 s: iterator tag 中嵌套的所有 s: checkbox 进行全选、反选操作

    在这个场景中,我们关注的是`s:iterator`标签和`s:checkbox`的使用,它们是Struts 2 中视图层(JSP)的重要组件,用于迭代数据集合并呈现复选框。在Web应用中,用户经常需要进行全选和反选的操作,这通常在管理多个...

    jsp中checkbox用法详解.docx

    在Web开发中,Checkbox(复选框)是非常常见的表单元素之一,主要用于收集用户的多选数据。在JSP(JavaServer Pages)环境下,Checkbox的使用同样广泛。本文将详细介绍在JSP中如何使用Checkbox,包括基本语法、动态...

    史上最全的struts2标签

    8. **checkboxlist** 标签:用于输出一系列的复选框,通常用于多选情况。例如:`&lt;s:checkboxlist name="interest" list="{'足球','篮球','排球','游泳'}" label="兴趣爱好"/&gt;`,创建了一个复选框列表供用户选择兴趣...

    Struts2 实现部门员工管理

    1. **复选框**:在表单中,复选框常用于多选。Struts2提供了`s:checkbox`标签,可以绑定到Action类的属性,例如: ```jsp &lt;s:checkbox name="employee.skills" label="技能选择" list="{'Java','Python','...

    下拉框的应用

    - `checkbox.jsp` 和 `checkbox2.jsp` 可能是关于复选框的示例页面,虽然标题是“下拉框的应用”,但它们可能与下拉框相关联,因为复选框有时会与下拉框一起用于提供多选功能。 - `action` 可能是指服务器端处理请求...

    中文-Struts2-Tags-API chm格式 非常详细的标签使用说明有例子

    2. **数据展示标签**:这些标签用于显示和操作模型数据,如`&lt;s:textfield&gt;`创建输入字段,`&lt;s:property&gt;`显示对象属性值,`&lt;s:checkbox&gt;`和`s:radio`用于复选框和单选按钮,`&lt;s:textarea&gt;`则用于文本区域。...

    javascript

    单选按钮`Radio`和复选框`Checkbox`允许用户进行单选或多选。文本区域`Textarea`则提供了多行文本输入的功能。文件上传对象`File`允许用户选择本地文件,并通过`files`属性获取选定的文件信息。 在实际应用中,掌握...

    录入学生信息答案1

    - `&lt;input type="checkbox"&gt;` 用于创建复选框,用户可以多选。在本例中,用于选择爱好(运动、游戏、阅读)。 - `&lt;select&gt;` 和 `&lt;option&gt;` 用于创建下拉列表,用户可从预设的选项中选择。在本例中,用于年龄的选择...

    struts2_标签使用方法.doc

    - `&lt;s:checkbox&gt;`:用于创建复选框,可以设置值和名称。 - `&lt;s:checkboxlist&gt;`:用于创建一组可多选的复选框,列表数据来源于一个集合。 D. `&lt;s:date&gt;`和`&lt;s:datetimepicker&gt;`: - `&lt;s:date/&gt;`:用于显示日期,可以...

    Struts2标签库详解

    3. `&lt;s:checkbox&gt;`和`s:radio&gt;`:创建复选框和单选按钮,可以与Action中的List属性进行双向绑定。 五、选择和列表标签库 这个库提供了`&lt;s:select&gt;`、`&lt;s:option&gt;`等标签,用于创建下拉列表和多选列表。 1. `&lt;s:...

    struts1标签库详解借鉴.pdf

    - `html:checkbox`, `html:radio`: 创建复选框和单选按钮,通常与逻辑标签配合使用。 - `html:multibox`: 创建多选框,允许用户选择多个选项。 - `html:link`: 创建链接,可以跳转到其他Action或者页面。 - `...

    j2ee 表单学习

    1. **GET** 方法:将表单中的数据转换成查询字符串的形式附加在URL之后,安全性较低,适合于非敏感数据的提交。 2. **POST** 方法:将表单中的数据封装在HTTP请求体中发送,安全性较高,适用于传输敏感信息。 #### ...

    HTML网页设计(表单元素).doc

    1. `&lt;input&gt;`标签是最常用的表单元素,可以定义多种类型的输入控件,如文本框、密码框、复选框、单选框、按钮等。`input`标签的`name`和`type`属性是必需的。`type`属性值有`text`、`password`、`file`、`checkbox`...

    HTML5基础知识-HTML5表单.pptx

    - **复选框(checkbox)**:用户可以多选,如`&lt;input type="checkbox" value="选项值"&gt;`,`checked`属性用于预选中。 - **单选按钮(radio)**:同一组内只能选中一个,如`选项值"&gt;`,`name`属性值需相同以实现...

    html与xml 表单设计课件

    HTML与XML是两种不同的标记语言,但在网页设计中,尤其是涉及到用户交互时,HTML的表单设计是不可或缺的一部分。...在实际应用中,还可以利用JavaScript进行更复杂的表单验证和动态交互效果的实现。

    struct2标签

    - `&lt;s:checkboxlist&gt;`:用于创建一组复选框,通常用于多选。 - `&lt;s:combobox&gt;`:创建下拉列表,支持AJAX交互。 D. 日期与时间处理: - `&lt;s:date&gt;`:格式化日期。 - `&lt;s:datetimepicker&gt;`:提供日期和时间选择器。 ...

Global site tag (gtag.js) - Google Analytics