.serialize()
方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作,比如<input>
, <textarea>
, 和 <select>
: $( "input, textarea, select" ).serialize();
:
只有 "successful controls"可以被序列化成字符串。其中,提交按钮的值不会被序列化。另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name
属性。此外,复选框(checkbox)和单选按钮(radio)(input
类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外,文件选择元素的数据也不会被序列化。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body, select { font-size:12px; } 6 form { margin:5px; } 7 p { color:red; margin:5px; font-size:14px; } 8 b { color:blue; } 9 </style> 10 <script src="http://code.jquery.com/jquery-latest.js"></script> 11 </head> 12 <body> 13 14 15 <form> 16 <select name="single"> 17 <option>Single</option> 18 <option>Single2</option> 19 </select> 20 21 <br /> 22 <select name="multiple" multiple="multiple"> 23 <option selected="selected">Multiple</option> 24 <option>Multiple2</option> 25 26 <option selected="selected">Multiple3</option> 27 </select> 28 <br/> 29 <input type="checkbox" name="check" value="check1" id="ch1"/> 30 31 <label for="ch1">check1</label> 32 33 <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/> 34 35 <label for="ch2">check2</label> 36 <br /> 37 <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/> 38 39 <label for="r1">radio1</label> 40 <input type="radio" name="radio" value="radio2" id="r2"/> 41 42 <label for="r2">radio2</label> 43 </form> 44 <p><tt id="results"></tt></p> 45 <script> 46 function showValues() { 47 var str = $("form").serialize(); 48 $("#results").text(str); 49 } 50 $(":checkbox, :radio").click(showValues); 51 $("select").change(showValues); 52 showValues(); 53 </script> 54 55 </body> 56 </html>
另外:
对于 input 的类型为 checkbox 或者 radio 时 配合 label 标签 且 checkbox radio 添加为 click事件 checked="checked" 选定
select 添加为 change事件 当为select标签时 multiple="multiple" selected="selected" 选定
checked="checked"
来源:https://www.cnblogs.com/dobestself-994395/p/4363073.html