本文摘自PHP中文网,作者(*-*)浩,侵删。
在日常开发过程中,有许多用到表单的地方。比如登录,注册,比如支付,填写订单,比如后台管理等等。使用jQuery来获取表单的值是比较常见的做法。
常见表单
单行文字域:<input type='text'>
1 | <input type= "text" id= 'name' value= 'pelli' >
|
密码域:<input type='password'>
1 | <input type= "password" id= 'pass' value= 'password' >
|
单选:<input type='radio' name='sex'>男 <input type='radio' name='sex'>女
1 2 3 4 | <input type= "radio" name= 'sex' id= 'man' value= "1" >
<label for = "man" >男</label>
<input type= "radio" name= 'sex' id= 'woman' value= "0" >
<label for = "woman" >女</label>
|
多选:
1 2 3 | <input type= 'checkbox' value= '1' name= 'intrest' >篮球
<input type= 'checkbox' value= '2' name= 'intrest' >足球
<input type= 'checkbox' value= '3' name= 'intrest' >皮球
|
下拉列表:
1 2 3 4 5 6 7 | <select name= "city" id= "city" >
<option value= "1" >北京</option>
<option value= "2" >南京</option>
<option value= "3" >上海</option>
<option value= "4" >成都</option>
<option value= "5" >西安</option>
</select>
|
多行文字域:<textarea>这里可以写多行文字</textarea>
1 | <textarea name= "" id= "remark" cols= "30" rows= "10" >这里是备注</textarea>
|
用jQuery获取表单标签值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | var name = $( "#name" ).val();
console.log(name);
var pass = $( "#pass" ).val();
console.log(pass);
var sex = $( "input:radio:checked" ).val();
console.log(sex);
var sex1 = checkAll($( "input:radio" ));
console.log(sex1);
var hobby = checkAll($( "input:checkbox" ));
console.log(hobby);
var city = $( "#city" ).val();
console.log(city);
var city1 = $( "#city option:selected" ).val();
console.log(city1);
var remark = $( "#remark" ).val();
console.log(remark);
|
一个可以获取单选和多选的函数,返回值得数组:
1 2 3 4 5 6 7 8 9 10 11 | function checkAll(inputlist){
var arr = [];
var num = inputlist.length;
for ( var i = 0; i < num; i++){
if (inputlist.eq(i).is( ":checked" )){
arr.push(inputlist.eq(i).val());
}
}
return arr;
}
|
总结:
单行文字:$("#text").val();
密码:$("#pass").val();
单选:$("input:radio:checked").val();
多选:遍历 $("input:checkbox"),判断是否选中
下拉:$("#select").val();或者$("#select option:select").val();
多行文字:$("textarea").val();
以上就是jquery怎么获取表单标签值的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
直击js,jQuery获取屏幕的宽度和高度代码
bootstrap 5 alpha发布啦!不再依赖jQuery,放弃支持ie
jQuery中slider是什么?
jQuery有哪些选择器
详解7款绚丽的jQuery/html5动画及源码
input输入框用jQuery怎么写失去焦点事件
jQuery怎么移除css样式
jQuery怎么删除css样式
jQuery ui datepicker时间控件的用法(二)
jQuery中prop什么意思
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jquery怎么获取表单标签值