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