jQuery在使用过程中,经常需要从各种表单元素取值,例如:text、Checkbox、Radiobox、Select、Textarea等。他们的操作方式又不尽相同,下面给出一个取值的实例,供大家参考。运行代码前请下载好最新版本的jQuery,并放在代码中指定的路径中。
<html><head><title>jQuery操纵Form表单元素(一)</title> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <script language="javascript" type="text/javascript" src="./common/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#infoSubmit").click(function () { var info = ''; info += '姓名:'+ $("#userName").val()+'\n'; info += '兴趣:'; var hobbys = $("input[type=checkbox][name='user.hobby']:checked"); $(hobbys).each(function(i,item) { info += $(item).attr("value")+';'; }); info += '\n'; info += '性别:' + $("input[type=radio][name='user.sex']:checked").val() + '\n'; info += '国籍:' + $("#userCountry").val() + '\n'; info += '简介:' + $("#userIntroduce").val() + '\n'; alert(info); }); }); </script> <style type="text/css"> * { color:#2d2d2d; font-size:12px; line-height:150%; } </style> </head> <body> <form name="form1" action="#"> <!--普通文本 --> 姓名:<input type="text" name="user.name" id="userName"></input> <br/> <!--checkBox--> 兴趣: <input type="checkbox" name="user.hobby" value="足球">足球</input> <input type="checkbox" name="user.hobby" value="篮球">篮球</input> <input type="checkbox" name="user.hobby" value="羽毛球">羽毛球</input> <input type="checkbox" name="user.hobby" value="象棋">象棋</input> <br/> <!--radioBox--> 性别: <input type="radio" name="user.sex" value="男" checked="checked">男</input> <input type="radio" name="user.sex" value="女">女</input> <br/> <!--select--> 国籍: <select name="国籍" id="userCountry" name="user.country"> <option value="">--请选择--</option> <option value="中国">中国</option> <option value="日本">日本</option> <option value="美国">美国</option> <option value="其他">其他</option> </select> <br/> <!--textArea--> 简介: <textarea name="user.introduce" id="userIntroduce"></textarea> <br/> <input type="button" id="infoSubmit" value="提交"></input> </form> </body> </html>