jQuery示例遍历表单数据并显示
Posted 霓裳梦竹
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery示例遍历表单数据并显示相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body, select { font-size:14px; } 6 form { margin:5px; } 7 p { color:red; margin:5px; } 8 b { color:blue; } 9 </style> 10 <script src="http://code.jquery.com/jquery-latest.js"></script> 11 </head> 12 <body> 13 <p><b>Results:</b> <span id="results"></span></p> 14 15 <form> 16 <select name="single"> 17 <option>Single</option> 18 <option>Single2</option> 19 20 </select> 21 <select name="multiple" multiple="multiple"> 22 <option selected="selected">Multiple</option> 23 <option>Multiple2</option> 24 25 <option selected="selected">Multiple3</option> 26 </select><br/> 27 <input type="checkbox" name="check" value="check1" id="ch1"/> 28 29 <label for="ch1">check1</label> 30 <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/> 31 32 <label for="ch2">check2</label> 33 <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/> 34 35 <label for="r1">radio1</label> 36 <input type="radio" name="radio" value="radio2" id="r2"/> 37 38 <label for="r2">radio2</label> 39 </form> 40 <script> 41 function showValues() { 42 var fields = $(":input").serializeArray(); 43 $("#results").empty(); 44 jQuery.each(fields, function(i, field){ 45 $("#results").append(field.value + " "); 46 }); 47 } 48 49 $(":checkbox, :radio").click(showValues); 50 $("select").change(showValues); 51 showValues(); 52 </script> 53 54 </body> 55 </html>
从表单获取值，遍历并将其显示出来
:input:选择所有 input, textarea, select 和 button 元素.
$(‘:checkbox‘) 等同于 $(‘[type=checkbox]‘)。如同其他伪类选择器（那些以“:”开始）建议前面加上一个标记名称或其他选择器;否则，默认使用通用选择("*")。换句话说$(‘:checkbox‘) 等同于 $(‘*:checkbox‘)，所以应该使用$(‘input:checkbox‘)来提升效率。
$(‘:radio‘)等价于$(‘[type=radio]‘)。如同其他伪类选择器（那些以“:”开始），建议使用此类选择器时，跟在一个标签名或者其它选择器后面，默认使用了全局通配符选择器 "*"。换句话说$(‘:radio‘) 等同于 $(‘*:radio‘)，所以应该使用$(‘input:radio‘)。
jQuery.each( collection, callback(indexInArray, valueOfElement) )
一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
$.each([52, 97], function(index, value) { alert(index + ‘: ‘ + value); }); //1:52 //1:97
var obj = { "flammable": "inflammable", "duh": "no duh" }; $.each( obj, function( key, value ) { alert( key + ": " + value ); }); //flammable: inflammable //duh: no duh
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.each demo</title> <style> div { color: blue; } div#five { color: red; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> <div id="five"></div> <script> var arr = [ "one", "two", "three", "four", "five" ]; var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; jQuery.each( arr, function( i, val ) { $( "#" + val ).text( "Mine is " + val + "." ); // Will stop running after "three" return ( val !== "three" ); }); jQuery.each( obj, function( i, val ) { $( "#" + i ).append( document.createTextNode( " - " + val ) ); }); </script> </body> </html>
Mine is one. - 1
Mine is two. - 2
Mine is three. - 3
- 4
- 5
以上是关于jQuery示例遍历表单数据并显示的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery-AJAX 向 PHP 提交表单并在不刷新的情况下在 div 中显示新内容的问题