欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-16 11:45:43
...

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

<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")这个对应的数组的每一个元素。