select多選和checkbox複選的值在js和action中的展現形式
阿新 • • 發佈:2019-01-05
話不多說,例如在前端頁面:
<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")這個對應的陣列的每一個元素。